基于el-table封装的可拖拽行列、选择列组件的实现

  // 这里可以放插槽
  
  

import HTable from "@/components/HTable";

export default {
  components: { HTable },
  data() {
    return {
      list: [],
      columns: [
        {
          label: "ID", // 描述
          prop: "_id", // 列的唯一值。 必须要有
          checked: true // 是否展示该列
          ... // 一些el-table-column的属性都可以写在这里
        },
        {
          label: "分类名称",
          prop: "name",
          checked: true
        },
        {
          label: "上级分类",
          prop: "parent.name",
          checked: true
        },
        {
          label: "状态",
          prop: "status",
          width: "100",
          checked: true
        },
        {
          label: "创建时间",
          prop: "create_time",
          slotHeaderName: "create_time", // 自定义表头
          checked: true
        },
        {
          label: "操作",
          prop: "action",
          fixed: "right",
          "min-width": "100",
          slotName: "action", // 自定义单元格插槽
          checked: true,
          disabled: true
        }
      ]
    };
  }
};