el-table表头前几列固定,后面几列根据接口返回的值不同展示不同

在使用 Element UIel-table 组件时,如果想要实现表头的前几列固定,而后面的列根据接口返回的数据动态展示,可以通过以下步骤来实现:

1. 固定表头前几列

el-table-column 中使用 fixed 属性来固定表头的前几列。例如,如果你想要固定前两列,可以这样做:

html 复制代码
<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="150" fixed></el-table-column>
  <el-table-column prop="name" label="姓名" width="200" fixed></el-table-column>
  <!-- 动态列将从这里开始 -->
</el-table>

2. 动态生成表头

为了根据后端返回的数据动态生成表头,你需要在获取到数据之后处理这些数据,然后动态地渲染 el-table-column

假设你的后端返回的数据结构如下:

json 复制代码
{
  "columns": [
    { "prop": "address", "label": "地址" },
    { "prop": "phone", "label": "电话" },
    // 更多列...
  ],
  "rows": [
    { "date": "2016-05-02", "name": "王小虎", "address": "上海市普陀区金沙江路 1518 弄", "phone": "12345678901" },
    // 更多行...
  ]
}

你可以这样处理并渲染:

javascript 复制代码
export default {
  data() {
    return {
      tableData: [],
      dynamicColumns: []
    };
  },
  methods: {
    async fetchData() {
      const response = await this.$axios.get('/api/data'); // 假设这是你的API请求
      this.dynamicColumns = response.data.columns;
      this.tableData = response.data.rows;
    }
  },
  mounted() {
    this.fetchData();
  }
};

3. 使用 v-for 渲染动态列

在模板中使用 v-for 指令来遍历 dynamicColumns 数组,从而动态生成 el-table-column

html 复制代码
<el-table :data="tableData" style="width: 100%">
  <el-table-column prop="date" label="日期" width="150" fixed></el-table-column>
  <el-table-column prop="name" label="姓名" width="200" fixed></el-table-column>
  <el-table-column
    v-for="column in dynamicColumns"
    :key="column.prop"
    :prop="column.prop"
    :label="column.label"
    :width="200"
  ></el-table-column>
</el-table>

4. 注意事项

  • 确保 dynamicColumns 中的每个对象都有 proplabel 属性,这对应于 el-table-columnproplabel 属性。
  • 如果需要对动态生成的列进行排序或其他操作,可以在 fetchData 方法中进一步处理 dynamicColumns
  • 动态列的宽度可以根据实际需求调整,上面的例子中设置为固定的200像素宽。

通过上述步骤,你就可以实现一个具有固定前几列且能够根据后端数据动态显示剩余列的表格了。

相关推荐
mCell5 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip5 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping11 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风12 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780012 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端12 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧12 小时前
Promise 的使用
前端·javascript
用户516816614584113 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅13 小时前
JavaScript 作用域
前端·javascript
前端缘梦13 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试