将日期格式化成"YYYY年MM月"并渲染到Element UI表格
要将拿到的值从'2023-08-29'变成'2023年09月'的格式,并渲染到表格中,你可以使用以下的方式:
- 首先,你需要在表格的
<el-table-column>中定义一个自定义的插槽,用来渲染日期数据。例如:
<el-table-column label="会计期间" align="center" width="220">
<template slot-scope="scope">
{{ formatDate(scope.row.date) }}
</template>
</el-table-column>
- 在你的Vue组件中,定义一个
formatDate方法,用于将日期格式化成"YYYY年MM月"的格式。例如:
methods: {
formatDate(date) {
const options = { year: 'numeric', month: 'long' };
const formattedDate = new Date(date).toLocaleDateString('zh-CN', options);
return formattedDate;
}
}
- 确保你的数据中包含一个名为
date的字段,用来存储日期值。例如:
data() {
return {
tableData: [
{ date: '2023-08-29' },
// 其他数据...
]
}
}
这样,当表格渲染时,会调用formatDate方法将日期格式化成你想要的格式,并显示在表格中的每一行的"会计期间"列中。
原文地址: http://www.cveoy.top/t/topic/qx79 著作权归作者所有。请勿转载和采集!