如何将 Vue Element UI 中的 el-table 单元格日期类型转换为文本显示格式?
时间: 2025-02-02 12:12:47 浏览: 86
在 Vue Element UI 中,可以使用 `el-table-column` 的 `formatter` 属性来将日期类型的单元格转换为文本显示格式。`formatter` 属性接收一个函数,该函数可以自定义单元格的显示内容。
以下是一个示例代码,展示了如何将日期类型的单元格转换为文本显示格式:
```html
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" :formatter="formatDate"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: new Date(),
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}
]
};
},
methods: {
formatDate(row, column) {
const date = new Date(row.date);
const year = date.getFullYear();
const month = ('0' + (date.getMonth() + 1)).slice(-2);
const day = ('0' + date.getDate()).slice(-2);
return `${year}-${month}-${day}`;
}
}
};
</script>
```
在这个示例中,`el-table` 组件绑定了 `tableData` 数据源。`el-table-column` 组件的 `prop` 属性指定了要显示的数据字段,`label` 属性指定了列的标题。`el-table-column` 组件的 `formatter` 属性绑定了一个名为 `formatDate` 的方法,该方法用于格式化日期。
`formatDate` 方法接收两个参数:`row` 和 `column`。`row` 参数表示当前行的数据,`column` 参数表示当前列的配置。`formatDate` 方法中使用 `Date` 对象来格式化日期,并返回格式化后的字符串。
阅读全文
相关推荐

















