动态添加table的列---1.0

最新推荐文章于 2024-08-26 10:27:22 发布

热爱敲代码

最新推荐文章于 2024-08-26 10:27:22 发布

阅读量317

点赞数

分类专栏：笔记文章标签： vue.js 前端

本文链接：https://blog.csdn.net/m0_55249356/article/details/124496332

版权

本文介绍了如何在Vue.js中使用v-for指令动态地添加表格列。然而，这种方法存在一个缺点，即一旦需要处理数据，必须重新渲染所有列。文章提到了`scope.row`代表表格的一行数据，`item.props`是列对应的英文属性名，而`item.label`则是列的显示文本。要实现此功能，需预先准备相应数据。

摘要由CSDN通过智能技术生成

使用v-for循环

缺点：数据不可单个处理一处理就要全部重写

 <el-table
      :data="tableData"
      stripe
      style="width: 100%"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <!-- 数据不可编辑，展示前应该处理好 -->
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="120">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-divider direction="vertical"></el-divider>
          <el-button