el-table-column v-for 日期和字典

在使用 `el-table-column` 通过 `v-for` 渲染动态列时，如果需要处理日期格式化和字典值的显示，可以通过以下方式实现： ### 动态渲染列并格式化日期 在 `v-for` 循环生成列时，可以针对特定字段（如日期字段）单独设置格式化逻辑。通常通过 `template slot-scope` 来实现自定义渲染内容。 示例代码如下： ```vue <el-table :data="tableData" border style="width: 100%"> <el-table-column v-for="(col, index) in columns" :key="index" :prop="col.prop" :label="col.label" > <template slot-scope="scope"> <!-- 判断是否是日期字段 --> <span v-if="col.type === 'date'">{{ formatDate(scope.row[col.prop]) }}</span> <!-- 判断是否是字典字段 --> <span v-else-if="col.type === 'dict'">{{ getDictLabel(scope.row[col.prop], col.dictKey) }}</span> <!-- 默认显示原始值 --> <span v-else>{{ scope.row[col.prop] }}</span> </template> </el-table-column> </el-table> ``` 在 `script` 部分定义 `columns` 数组，并提供对应的格式化函数： ```javascript export default { data() { return { tableData: [ { id: 1, birthDate: '2023-05-15', gender: 'male' }, { id: 2, birthDate: '2022-08-22', gender: 'female' } ], columns: [ { prop: 'id', label: 'ID' }, { prop: 'birthDate', label: '出生日期', type: 'date' }, { prop: 'gender', label: '性别', type: 'dict', dictKey: 'gender_dict' } ], dicts: { gender_dict: [ { value: 'male', label: '男' }, { value: 'female', label: '女' } ] } }; }, methods: { formatDate(dateStr) { const date = new Date(dateStr); return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`; }, getDictLabel(value, key) { const entry = this.dicts[key]?.find(item => item.value === value); return entry ? entry.label : value; } } }; ``` ### 使用说明 - **日期格式化**：通过判断列类型为 `'date'`，调用 `formatDate()` 方法对日期字符串进行格式化输出。 - **字典映射**：通过判断列类型为 `'dict'` 并传入 `dictKey`，从预设的字典对象中查找对应的标签值。 - **动态列渲染**：利用 `v-for` 遍历 `columns` 数组生成所有列，提升可维护性和灵活性[^4]。 ### 注意事项 - 在使用 `v-for` 渲染 `el-table-column` 时，确保每个列的 `:key` 是唯一且稳定的，避免因 `key` 冲突导致渲染异常。必要时可以结合 `index` 和随机数来保证唯一性，例如 `:key="index + Math.random()"` [^3]。 - 如果表格数据更新后视图未刷新，可以在数据更新后手动调用 `this.$refs.table.doLayout()` 方法以重新计算布局。