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

页面展示:

相关推荐
ajsbxi34 分钟前
【Java 基础】核心知识点梳理
java·开发语言·笔记
呱呱巨基1 小时前
vim编辑器
linux·笔记·学习·编辑器·vim
新子y1 小时前
【小白笔记】普通二叉树(General Binary Tree)和二叉搜索树的最近公共祖先(LCA)
开发语言·笔记·python
聪明的笨猪猪1 小时前
Java JVM “调优” 面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
爱学习的uu1 小时前
CURSOR最新使用指南及使用思路
人工智能·笔记·python·软件工程
YuCaiH1 小时前
Linux文件处理
linux·笔记·嵌入式
Cathy Bryant2 小时前
大模型损失函数(二):KL散度(Kullback-Leibler divergence)
笔记·神经网络·机器学习·数学建模·transformer
qq_398586542 小时前
Threejs入门学习笔记
javascript·笔记·学习
hour_go3 小时前
TCP/IP协议相关知识点
网络·笔记·网络协议·tcp/ip
潘达斯奈基~3 小时前
在使用spark的applyInPandas方法过程中,遇到类型冲突问题如何解决
大数据·笔记