Vue el-table 字段自定义排序（进阶）

需求：

• 使用 el - dialog 弹窗组件，勾选和排序主列表每列所要显示的字段。
• 页面 el - table 列表更加勾选后排序的字段数组，实现每列按照排列顺序动态展示和隐藏。

效果：

代码实现：

1. 创建弹窗组件

首先，创建一个弹窗组件，用于显示可排序和勾选的列表。这个组件将包含一个表格，表格的列包括复选框、字段名称和操作按钮（上下移动）。

  <template>
  <el-dialog title="自定义列表" :visible.sync="visible" width="50%">
    <el-table :data="fields" border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="label" label="字段"></el-table-column>
      <el-table-column label="操作" width="120">
        <template slot-scope="scope">
          <el-button size="mini" @click="moveUp(scope.$index)" :disabled="scope.$index === 0">↑</el-button>
          <el-button size="mini" @click="moveDown(scope.$index)" :disabled="scope.$index === fields.length - 1">↓</el-button>
        </template>
      </el-table-column>
    </el-table>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="confirm">确 认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      fields: [
        { label: '一启', value: '111' },
        { label: '二乔', value: '222' },
        { label: '三思', value: '333' },
        { label:'四维', value: '444' },
        { label: '伍德', value: '555' },
        { label: '六离', value: '666' },
        { label: '七彩', value: '777' },
        { label: '八荒', value: '888' },
        { label: '九歌', value: '999' },
        { label: '十方', value: '1010' },
        { label: '十一郎', value: '1011' },
        { label: '十二辰', value: '1012' },
        { label: '十三弦', value: '1013' },
        { label:'十四行', value: '1014' },
        { label:'十五夜', value: '1015' }
        // 其他字段...
      ],
      selectedFields: [],
      sortedFields: []
    };
  },
  methods: {
    show() {
      this.visible = true;
    },
    moveUp(index) {
      if (index > 0) {
        const temp = this.fields[index];
        this.fields.splice(index, 1);
        this.fields.splice(index - 1, 0, temp);
      }
    },
    moveDown(index) {
      if (index < this.fields.length - 1) {
        const temp = this.fields[index];
        this.fields.splice(index, 1);
        this.fields.splice(index + 1, 0, temp);
      }
    },
    confirm() {
      // 获取勾选的字段
      this.selectedFields = this.fields.filter(field => {
        // 这里假设el - table的selection功能通过ref获取选中数据，简化示例直接在confirm中处理
        // 实际可通过this.$refs.table.selection获取选中项，以下为模拟逻辑
        // 简化处理，假设有一个数组记录选中状态，这里直接使用filter过滤
        // 实际应根据复选框的绑定数据来判断
        // 以下为模拟，假设每个field对象有selected属性
        // 实际开发中需要完善这部分逻辑
        return field.selected; 
      }).map(field => field.value);
      // 获取排序后的字段顺序
      this.sortedFields = this.fields.map(field => field.value);
      this.visible = false;
      // 触发事件，通知父组件更新列表
      this.$emit('update-list', { selectedFields: this.selectedFields, sortedFields: this.sortedFields });
    }
  }
};
</script>
<style scoped>
/* 可以根据需要添加样式 */
.el-table .el-table__header .cell .el-checkbox__inner{
    display: none !important; 
}
.el-table .el-table__header .el-table-column--selection .cell::before{
    content: '选择';
    text-align: center;
    line-height: 37px;
}
</style>

2. 在父组件中使用弹窗组件

在父组件中，引入弹窗组件，并处理弹窗的显示和确认事件。

<template>
  <div>
    <el-button @click="showCustomListDialog">自定义列表</el-button>
    <custom-list-dialog ref="customListDialog" @update-list="updateList"></custom-list-dialog>
    <el-table :data="tableData" border>
      <el-table-column v-for="field in displayedFields" :key="field" :prop="field" :label="getFieldLabel(field)"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import CustomListDialog from './CustomListDialog.vue';

export default {
  components: {
    CustomListDialog
  },
  data() {
    return {
      tableData: [
        // 表格数据...
      ],
      allFields: {
        111: '一启',
        222: '二乔',
        333: '三思',
        // 其他字段映射...
      },
      displayedFields: []
    };
  },
  methods: {
    showCustomListDialog() {
      this.$refs.customListDialog.show();
    },
    updateList({ selectedFields, sortedFields }) {
      // 根据勾选的字段和排序后的字段更新显示的列
      if (selectedFields.length > 0) {
        this.displayedFields = selectedFields;
      } else {
        this.displayedFields = sortedFields;
      }
    },
    getFieldLabel(field) {
      return this.allFields[field];
    }
  }
};
</script>

3. 逻辑说明

• ‌弹窗组件‌：包含一个表格，表格中的每一行可以上下移动和勾选。点击确认按钮后，将勾选的字段和排序后的字段顺序通过事件传递给父组件。
• ‌父组件‌：接收弹窗组件传递的事件，根据勾选的字段和排序后的字段顺序更新表格显示的列。

4. 注意事项

• 上述代码中，弹窗组件中的复选框选中状态处理是简化版本，实际开发中需要完善，例如在 fields 数组中为每个字段对象添加 selected 属性，并通过 v-model 绑定到复选框。
• 表格数据 tableData 需要根据实际业务进行填充。

通过以上步骤，就可以实现点击自定义列表按钮弹出弹窗，进行字段的排序和勾选，确认后更新表格显示的功能。