<el-table-column label="艺术家描述" align="center" prop="artistDesc" :formatter="stateFormat"/>

时间: 2023-08-21 09:03:54 浏览: 79

VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解

主要介绍了VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧在Vue2.0结合ElementUI2.0的项目开发中，常常会遇到表格列数不固定，需要根据数据动态渲染的情况。本篇文章将详细介绍如何实现`el-table`的循环动态列渲染。 ElementUI的`el-table`组件通常通过`<el-table-column>`标签来定义每一列的属性，如`prop`、`label`和`width`等。例如，以下是一个静态的表格列定义： ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column prop="date" label="日期" width="180"></el-table-column> <el-table-column prop="name" label="姓名" width="180"></el-table-column> <el-table-column prop="address" label="地址"></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ // 数据... ] }; } }; </script> ``` 然而，当列数非常多时，手动添加`<el-table-column>`会变得极其繁琐。此时，我们可以利用Vue的`v-for`指令来动态渲染这些列。假设我们有一个包含所有列信息的数组`positionList`，每个元素对应一列的属性，包括`prop`、`label`和`width`。例如： ```javascript const positionList = [ { prop: 'date', label: '日期', width: 180 }, { prop: 'name', label: '姓名', width: 120 }, { prop: 'address', label: '地址', width: 150 }, ]; ``` 接下来，我们将`<el-table-column>`的定义替换为`v-for`循环： ```html <template> <el-table :data="tableData" style="width: 100%"> <el-table-column v-for="(item, index) in positionList" :key="index" :prop="item.prop" :label="item.label" :width="item.width" ></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ // 数据... ], positionList: [ // 列信息数组... ], }; }, }; </script> ``` 此外，为了处理不同长度的表头文字导致的折行问题，可以设置动态宽度。例如，我们有一个`positionKey`对象，其中键对应于数据对象的属性，值包含了标题和宽度信息： ```javascript const positionKey = { key1: { title: '表头对应的文字1', width: 100 }, key2: { title: '表头对应的文字2', width: 120 }, key3: { title: '表头对应的文字3', width: 110 }, }; // 在 Vue 实例中引用 positionKey： data() { return { positionKey: {...positionKey}, // 复制 positionKey 到 Vue 的 data ... }; }, ``` 然后在`<el-table-column>`中，通过`v-for`循环匹配`positionList`和`positionKey`的键，获取对应的宽度： ```html <el-table-column v-for="(item, index) in positionList" :key="index" :prop="item.prop" :label="item.label" :width="positionKey[item.prop] ? positionKey[item.prop].width : item.width" ></el-table-column> ``` 这样，我们就实现了`el-table`的动态列渲染，可以根据实际数据动态生成列，并且能够根据列标题自动调整宽度。这样的实现方式不仅简化了代码，也为后期可能的自定义拖拽配置动态列提供了便利。理解并熟练掌握Vue的`v-for`指令以及如何与ElementUI的`el-table`组件配合，是构建灵活可扩展的表格的关键。通过动态生成列，可以极大地提高代码的可维护性和复用性。希望这篇文章能对你在开发过程中有所帮助，祝你在编程之路上越走越远！

你提到了一个 Vue.js 的 el-table-column 组件，它包含了一些属性和格式化函数。其中，label 属性用于设置列的标题为"艺术家描述"，align 属性用于设置列内容的对齐方式为居中，prop 属性用于指定列数据的字段名为"artistDesc"。另外，你还提到了一个名为 stateFormat 的格式化函数，它可能被用来对列数据进行处理和展示。请问有关这个 el-table-column 组件的更多细节或其他相关问题吗？

阅读全文

<el-table-column label="艺术家描述" align="center" prop="artistDesc" :formatter="stateFormat"/>

相关推荐

el-table无限滚动+控制列是否显示+列排序（非json）

vue el-table实现行内编辑功能

<el-table-column :label=“学生身份证号” align=“center” prop=“idNumber” width=“130” min-width=“130” /> 设置label 文字前面有红色星号文字为黑色 ts 写法

Vue中，接受到来自后端的对象，给courses: [],赋值 this.courses = res.data.records;，在给<el-table-column prop="credit" label="学分" align="center"></el-table-column>显示时，小数部分不见了，例如3.00，变成了3，怎么解决

<el-table-column>

</el-table-column>

element-ui 表格数据时间格式化的方法

el-table-column

el-table-column配置项

el-table-column 内容过长

el-table-column内部时间格式转换

el-table根据列表中字段相同的值进行合并展示

返回数据key是表头value是内容怎么在el-table中显示

如何在Vue项目中利用Element UI的el-table组件创建一个能够显示一行多个任务并支持任务跨越多个单元格的甘特图？

将表头单元格展示为复选框，行内单元格正常展示，不需要type="selection"的列，选中该列表的表头的复选框，点击删除列可以删除整列

软考论文范例解读：信息系统项目管理与设计方法的应用

最新推荐

软考论文范例解读：信息系统项目管理与设计方法的应用

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档 .zip

Go语言简易指令树实现.zip

基于java的新生报到系统的开题报告.docx

基于爬虫的web漏洞扫描器详细文档+资料齐全.zip

Raspberry Pi OpenCL驱动程序安装与QEMU仿真指南

管理建模和仿真的文件

Fluent UDF实战攻略：案例分析与高效代码编写

如何使用DPDK技术在云数据中心中实现高效率的流量监控与网络安全分析？

Apache RocketMQ Go客户端：全面支持与消息处理功能