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

效果

需要环境

vue
elementUI
拖拽插件Sortable.js

需配置属性

示例

  // 这里可以放插槽
  
  

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
        }
      ]
    };
  }
};

有用到的话给我点个赞！附组件代码

到此这篇关于基于el-table封装的可拖拽行列、选择列组件的实现的文章就介绍到这了,更多相关el-table 可拖拽行列内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！