<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
};

页面展示:

相关推荐
元直数字电路验证11 分钟前
云计算实验笔记(四):容器编排(Container Orchestration)
运维·笔记·docker·云计算
自小吃多1 小时前
某志步进电机驱动器故障排查标准流程
笔记
zhangrelay1 小时前
后智能时代智能体推演预测娱乐文-节选-
笔记·学习·娱乐
小碗羊肉1 小时前
【Agent笔记 | 第六篇】Agent关键组件
笔记·agent
likerhood2 小时前
服务器使用 vLLM 部署 Qwen2.5-Coder-7B-CL 笔记
服务器·笔记·vllm
Upsy-Daisy2 小时前
Hermes Agent 学习笔记 01:一个会记忆、会学习、能长期运行的 AI Agent
人工智能·笔记·学习
LuminousCPP2 小时前
从零开始学 C++|系列开篇:从 C 到 C++ 的衔接之路
开发语言·c++·笔记
星恒随风2 小时前
C++ 类和对象入门(一):从 class、访问限定符到 this 指针
开发语言·c++·笔记·学习·状态模式
ouliten3 小时前
C++笔记:C++20风格线程池
c++·笔记·c++20
超人不会飞_Jay3 小时前
6.2前端笔记
前端·javascript·笔记