<el-table-column label="文件展示" align="center" prop="url"> <template slot-scope="scope"> <ImagePreview v-if="previewListResource && checkFileSuffix(scope.row.fileSuffix)" :width=100 :height=100 :src="scope.row.url" :preview-src-list="[scope.row.url]"/> <span v-text="scope.row.url" v-if="!checkFileSuffix(scope.row.fileSuffix) || !previewListResource"/> </template> </el-table-column>解读一下

时间: 2024-04-12 18:33:13 浏览: 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`组件配合，是构建灵活可扩展的表格的关键。通过动态生成列，可以极大地提高代码的可维护性和复用性。希望这篇文章能对你在开发过程中有所帮助，祝你在编程之路上越走越远！

这段代码是使用 Element UI 中的 `<el-table-column>` 组件来创建一个文件展示列。该列包含了一个模板，通过 `slot-scope` 属性对作用域进行定义。在模板中，首先使用条件判断来确定是否需要显示 `ImagePreview` 组件。`v-if` 判断条件中使用了两个条件：`previewListResource` 和 `checkFileSuffix(scope.row.fileSuffix)`。这意味着只有当 `previewListResource` 为真且文件后缀符合条件时，才会显示 `ImagePreview` 组件。 `ImagePreview` 组件的属性包括了图片的宽度和高度，以及图片的源地址 `:src="scope.row.url"` 和预览地址列表 `:preview-src-list="[scope.row.url]"`。在 `ImagePreview` 组件之后，使用 `v-text` 指令来显示 `scope.row.url` 的文本内容。这里的条件判断是：如果文件后缀不符合条件或者 `previewListResource` 为假，则显示文本内容。总体来说，这段代码的作用是根据文件的后缀和配置条件，决定是显示图片预览还是文件地址文本。

阅读全文

相关推荐

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

v-slot和slot、slot-scope之间相互替换实例|angluo-javascript-342101.pdf

<el-table v-loading=loading :data=directionList > <el-table-column label=流出区域id align=center prop=outAreaId /> <el-table-column label=流出区域 align=center prop=areaName /> 怎么将这两个参数关联起来并展示时两个参数是成双展示

最新推荐

火炬连体网络在MNIST的2D嵌入实现示例

管理建模和仿真的文件

L2正则化的终极指南：从入门到精通，揭秘机器学习中的性能优化技巧

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

Angular插件增强Application Insights JavaScript SDK功能

"互动学习：行动中的多样性与论文攻读经历"

L1正则化模型诊断指南：如何检查模型假设与识别异常值（诊断流程+案例研究）

如何构建一个符合GB/T19716和ISO/IEC13335标准的信息安全事件管理框架，并确保业务连续性规划的有效性？

实时三维重建：InfiniTAM的ros驱动应用

关系数据表示学习