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像素宽。

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

相关推荐
aesthetician17 小时前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
Django强哥17 小时前
JSON Schema Draft-07 详细解析
javascript·算法·代码规范
U.2 SSD17 小时前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆17 小时前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel17 小时前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
Never_Satisfied17 小时前
在JavaScript / HTML中,Chrome报错此服务器无法证实它就是xxxxx - 它的安全证书没有指定主题备用名称
javascript·chrome·html
艾小码18 小时前
零基础学JavaScript:手把手带你搭建环境,写出第一个程序!
javascript
北海-cherish1 天前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch1 天前
网球馆自动预约系统的反调试
javascript·网络
新中地GIS开发老师1 天前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学