element-ui复杂table表格-动态新增列、动态调整行、列顺序

这篇文章距离上次修改已过221天，其中的内容可能已经有所变动。

在Element UI中创建一个复杂表格，可以动态地新增列、调整行顺序，可以通过以下方式实现：

动态新增列：可以使用v-for指令来遍历一个数组，该数组包含列的信息。
动态调整行顺序：可以使用draggable组件来实现行之间的拖放排序。

以下是一个简单的例子，展示了如何实现这些功能：

<template>
  <el-table :data="tableData" row-key="id" border>
    <el-table-column label="ID" width="180" prop="id"></el-table-column>
    <el-table-column v-for="col in dynamicColumns" :key="col.prop" :label="col.label" :prop="col.prop">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="handleDelete(scope.$index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <draggable v-model="tableData" @end="handleDragEnd">
    <div v-for="item in tableData" :key="item.id">{{ item.name }}</div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable
  },
  data() {
    return {
      tableData: [
        { id: 1, name: 'John', age: 30, email: 'john@example.com' },
        { id: 2, name: 'Jane', age: 25, email: 'jane@example.com' },
        // ...
      ],
      dynamicColumns: [
        { label: '姓名', prop: 'name' },
        { label: '年龄', prop: 'age' },
        // ...
      ]
    };
  },
  methods: {
    handleDelete(index) {
      this.tableData.splice(index, 1);
    },
    handleDragEnd(event) {
      // 拖动结束后的处理逻辑
    }
  }
};
</script>

在这个例子中，draggable 组件用于行的拖动排序，dynamicColumns 数组用于动态生成表格列。当拖动表格中的行时，handleDragEnd 方法会被调用，你可以在这个方法中实现排序后的逻辑处理。

element-ui复杂table表格-动态新增列、动态调整行、列顺序

评论已关闭

推荐阅读