el-table-column 采用v-for

最新推荐文章于 2025-04-25 09:29:42 发布

不爱吃饭爱吃菜

最新推荐文章于 2025-04-25 09:29:42 发布

阅读量1.7k

点赞数

文章标签： vue.js elementui

本文链接：https://blog.youkuaiyun.com/weixin_45288172/article/details/130949949

版权

该段代码展示了如何在Vue.js中使用el-table-column组件动态渲染表格列，并通过v-for指令遍历数据。每个列包含显示溢出提示、属性绑定以及中心对齐。此外，点击单元格触发getDetailedFault方法，方法参数基于当前item值，用于实现不同列的特定操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-table-column
   	v-for="item in PCSTitleList"
    :key="item"
    :label="item"
    show-overflow-tooltip
    :prop="item"
    min-width="70px"
    align="center"
>
   <template v-slot="scope">
       <div
           class="status-point"
           :class="scope.row[item] == 1 ? 'red' : ''"  //根据item，添加特殊样式
           @click="getDetailedFault(PCSTitleList.indexOf(item) + 1)" //根据不同的item，绑定不同的点击事件
        ></div>
     </template>
</el-table-column>