<el-table>设置一列为固定字段,其他列为循环生成

  <el-table :data="tableData" style="width: 100%">
      <el-table-column
        prop="name"
        label="固定字段名"
        :formatter="formatter"
      >
      </el-table-column>
      <el-table-column
        v-for="(item, index) in wordsColumns"
        :prop="item.name"
        :label="item.label"
        :key="index"
      >
      </el-table-column>
    </el-table>



const tableData = ref(
  [{
        date: '2016-05-02',
        id: '1',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        id: '2',
        name:'章三',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        id: '3',
        name: '李四',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        id: '4',
        name: '王五',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
);

const wordsColumns = [
  { name: "name", label: "姓名" },
  { name: "address", label: "地址" },
  { name: "date", label: "时间" },
];


const formatter = (row, column) => {
      console.log(row, column)
      switch (row.id) {
        case '1':
          return '用户1'
        case '2':
          return '用户2'
        case '3':
          return '用户3'
        case '4':
          return '用户4'
      }
      let newName = '用户' + row.name
      return newName
};

页面展示:

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-29 16:00:05       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-29 16:00:05       101 阅读
  3. 在Django里面运行非项目文件

    2024-03-29 16:00:05       82 阅读
  4. Python语言-面向对象

    2024-03-29 16:00:05       91 阅读

热门阅读

  1. 非root用户安装git lfs(git大文件)命令记录

    2024-03-29 16:00:05       42 阅读
  2. PDF按行&页读取文字

    2024-03-29 16:00:05       39 阅读
  3. 算法题1两数之和

    2024-03-29 16:00:05       36 阅读
  4. Windows运维_Windows下配置Apache-Haus(Apache2.4)

    2024-03-29 16:00:05       28 阅读
  5. 如何分配FPGA管脚

    2024-03-29 16:00:05       37 阅读
  6. vue3 绑定form弹窗的方式

    2024-03-29 16:00:05       37 阅读
  7. angular 组件传值交互

    2024-03-29 16:00:05       39 阅读
  8. Python进行DevOps实践

    2024-03-29 16:00:05       41 阅读
  9. Calendar日历类

    2024-03-29 16:00:05       36 阅读
  10. Python教程:一文掌握Python多线程(很详细)

    2024-03-29 16:00:05       33 阅读
  11. 离散数对问题

    2024-03-29 16:00:05       36 阅读