Как отобразить вычисленное значение для столбца в vue-table-2
API для сервера возвращает набор данных, в котором дата / время являются числом эпохи (eventTime). Мне нужно перевести его в удобочитаемый формат даты и времени. Каков правильный формат, чтобы произошло то же самое?
Шаблон для отображения таблицы
<div class = "table-responsive">
<v-client-table
:data = "tableData"
:columns = "columns"
:options = "options">
</v-client-table>
</div>
Часть JS
data () {
return {
User,
title: 'Verifications',
columns: ['trackingcode', 'userName', 'eventTime',
'scanResult', 'place_info.administrative_area_level_1'],
tableData: [],
rows: this.tableData,
options: {
uniqueKey: '_id',
headings: {
trackingcode: 'Serial Num',
userName: 'User Name',
dateTime: 'Date/Time',
scanResult: 'Status',
'place_info.administrative_area_level_1': 'City'
},
columnsDropdown: true,
filterByColumn: true,
sortable: ['trackingcode', 'userName'],
filterable: ['trackingcode', 'userName', 'place_info.administrative_area_level_1']
}
}
methods: {
getHumanDate: function (date) {
var fixedstring
try {
// If the string is UTF-8, this will work and not throw an error.
fixedstring = decodeURIComponent(escape(date))
} catch (e) {
// If it isn't, an error will be thrown, and we can asume that we have an ISO string.
fixedstring = date
}
return moment.unix(fixedstring / 1000).format('DD-MMM-YYYY h:mm:ss A Z')
}
}
У меня уже есть функция для этого. Я пытаюсь достичь того, как отобразить вычисленное / переведенное клиентом значение столбца для каждой строки.
обновил имеющиеся у меня функции. Прекрасно работает, когда перевод не требуется.
Ответы 1
Вы можете сделать все это с помощью объекта js Date, я не понимаю, в чем проблема?
Чтобы преобразовать ms-Since-epoch в объект даты, просто введите его в конструктор ... new Date(1538380103350); Лучшее место для этого - сразу после его получения, после JSON.parse() или даже в функции оживления, если это имеет смысл, но может быть сложно отличить даты в этом формате от других данных.
Затем отформатируйте или переведите дату со всеми возможностями toLocaleDateString(). Дайте нам более подробную информацию о необходимом формате, и я могу дать более полезный совет :-)
Может быть, мой проблемный пример вводит в заблуждение. Сама по себе помощь с форматированием даты мне не нужна. Мне нужна помощь в добавлении нового поля / столбца в массив после завершения вызова axios / async. дата / время - одно из таких полей, которое необходимо изменить перед отображением в таблице. У меня есть другие поля, которые требуют изменения значений int на строку. Короче говоря, как лучше всего изменять / манипулировать / добавлять данные в полученный набор данных?
В массивах Js на самом деле нет столбцов, это одномерные списки объектов. Посмотрите на методы массива map () и forEach () для обхода массива. С вашей датой, как я уже сказал, имеет смысл перезаписать значение временной метки реальным объектом даты. Для других свойств форматирование не является хорошей причиной для добавления свойства к исходным данным! Вы хотите, чтобы исходные данные оставались «нормализованными», поэтому есть одно однозначное место для их изменения. Затем вы помещаете все свое форматирование в вычисленный Vue. Это помогает? Покажи мне исходные данные?
Спасибо за ваш ответ. Я смог сделать то же самое, используя метод rowCallback vue-table-2. Однако я учту и предложенные варианты.
С датами существует так много уловок на разных этапах, что полезно иметь политику. Наша политика состоит в том, чтобы преобразовать их в объекты Date с помощью функции оживления, второго аргумента JSON.parse (). И чтобы даты с неуказанным часовым поясом были переведены в UTC. И использовать полночь по Гринвичу для обозначения «просто даты». Приверженность этим принципам веры помогает нам оставаться в здравом уме.
Это значение - секунды или миллисекунды? В любом случае рекомендую moment.js