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

页面展示:

相关推荐
V---scwantop---信6 分钟前
复古未来主义屏幕辉光像素化显示器反乌托邦效果PS(PSD)设计模板样机 Analog Retro-Futuristic Monitor Effect
笔记
DreamBoy@23 分钟前
【408--考研复习笔记】计算机网络----知识点速览
笔记·考研
想你依然心痛29 分钟前
Spark大数据分析与实战笔记(第四章 Spark SQL结构化数据文件处理-03)
笔记·数据分析·spark
郭涤生1 小时前
第十三章:持久化存储_《凤凰架构:构建可靠的大型分布式系统》
笔记·分布式·架构·系统架构
郭涤生1 小时前
第二章:访问远程服务_《凤凰架构:构建可靠的大型分布式系统》
笔记·架构·系统架构
郭涤生2 小时前
Chapter 4: Processor Architecture_《Computer Systems A Programmer’s Perspective》
笔记·系统架构
郭涤生3 小时前
Chapter 12: The Future of Data Systems_《Designing Data-Intensive Application》
笔记·分布式
LXL_243 小时前
一、STM32简介
笔记·stm32·嵌入式硬件
FakeOccupational3 小时前
电路笔记(元器件):ADC LTC系列模数转换器的输出范围+满量程和偏移调整
笔记
电星托马斯4 小时前
Linux如何设置bash为默认shell
linux·运维·服务器·笔记·程序人生·bash·个人开发