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

目标：实现一个复杂table具有以下功能：表格行展开、全部展开、收起、全部收起；可动态配置展示哪些列、调整列展示顺序；动态调整行顺序、行上移、行下移、行移动最顶部、行移动最底部

一、页面效果：

1.全部展开

2.全部收起

 3.配置显示列

 4.调整字段顺序（拖拽方式）

 5.行操作（查看、修改、删除、行上下移动）

二、代码实现（vue+Element-ui）

思路：本质上就是将表格看成一个数组，对表格的操作当成对数组的操作。

  
    
        全部展开
        全部收起
        字段配置
    
    
        
                
                
                    
                        
                            ...
                            
                                查看
                                修改
                                删除
                                移至顶部
                                上移
                                下移
                                移至底部
                            
                        
                    
                
        
    
    
    字段配置
        
            
                全部
                                
                
                    
                        {{item}}
                    
                

            
            
                
                    
                        
                            {{field}}
                        
                    
                

            
        
        
            恢复默认
            取 消
            确 定
        
    

  



import vuedraggable from 'vuedraggable';
const columnOptions=['编号', '计划开始日期','计划完成日期','实际开始日期','实际完成日期','参考提前期',
'计划提前期','实际提前期','前置任务','产出物', '负责人', '负责人部门', '经办人', '经办人部门',
'重要程度','状态', '逾期状态 ','承诺交期','预测交期','备注'];
export default {
  name: 'Test',
    components: {
    vuedraggable
  },
  data () {
    return {
        expandRowKeys: [],
        activeName:'fieldsChosen',
        dialogVisible:false,
              // 列信息
        checkedColumns:['编号','计划开始日期','计划完成日期','实际开始日期','实际完成日期'],
        checkAll:false,
        columns:columnOptions,
        isIndeterminate:true,
        fieldsTemp:[],//存放按指定顺序排列的fields数组
        fields:[
            {label:"计划名称", prop:"planName", visible: true},
            {label:"编号", prop:"id", visible: true },
            {label:"计划开始日期", prop:"beginTimeP", visible: true },
            {label:"计划完成日期", prop:"endTimeP", visible: true },
            {label:"实际开始日期", prop:"beginTimeS", visible: true },
            {label:"实际完成日期", prop:"endTimeS" , visible: true },
            {label:"参考提前期", prop:"referTime", visible: false },
            {label:"计划提前期", prop:"planTime", visible: false },
            {label:"实际提前期", prop:"practicalTime", visible: false },
            {label:"前置任务", prop:"frontTask", visible: false },
            {label:"产出物", prop:"product", visible: false },
            {label:"负责人", prop:"principal", visible: false },
            {label:"负责人部门", prop:"principalDep", visible: false },
            {label:"经办人", prop:"operator", visible: false },
            {label:"经办人部门", prop:"operatorDep", visible: false },
            {label:"重要程度", prop:"important", visible: false },
            {label:"状态", prop:"status", visible: false },
            {label:"逾期状态", prop:"delayStatus" , visible: false },
            {label:"承诺交期", prop:"promiseTime" , visible: false },
            {label:"预测交期", prop:"predictTime" , visible: false },
            {label:"备注", prop:"remark", visible: false }
        ],
        // fieldList:['编号', '计划开始日期','计划完成日期','实际开始日期','实际完成日期','参考提前期',
        // '计划提前期','实际提前期','前置任务','产出物', '负责人', '负责人部门', '经办人', '经办人部门',
        // '重要程度','状态', '逾期状态 ','承诺交期','预测交期','备注'],
        fieldList:columnOptions,
        tableData: [
            {
                id: "001",
                planName: "ffff",
                beginTimeP: "2022-02-03",
                endTimeP: "2022-02-03",
                beginTimeS: "2022-02-03",
                endTimeS: "2022-02-03",
                children: [
                    { id: "00101", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
                    { id: "00102", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
                    { id: "00103", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
                    { id: "00104", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"}
                ]
            },
            {
                id: "002",
                planName: "uuuu",
                beginTimeP: "2022-02-03",
                endTimeP: "2022-02-03",
                beginTimeS: "2022-02-03",
                endTimeS: "2022-02-03",
                children: [
                    { id: "00201", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
                    { id: "00202", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
                ]
            },
            {
                id: "003",
                planName: "yyyy",
                beginTimeP: "2022-02-03",
                endTimeP: "2022-02-03",
                beginTimeS: "2022-02-03",
                endTimeS: "2022-02-03",
                children: [
                    { id: "00301", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
                    { id: "00302", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"}
                ]
            },
            {
                id: "004",
                planName: "xxxx",
                beginTimeP: "2022-02-03",
                endTimeP: "2022-02-03",
                beginTimeS: "2022-02-03",
                endTimeS: "2022-02-03",
                children: [
                    { id: "00401", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"},
                    { id: "00402", planName: "ffff",beginTimeP: "2022-02-03",endTimeP: "2022-02-03",beginTimeS: "2022-02-03",endTimeS: "2022-02-03"}
                ]
            }
        ]
    }
  },
  computed:{
    activeFields: function(){
        return this.fields.filter((item)=>{
            return item.visible;
        })
    }
  },
  mounted(){
    this.tableDataHandle(this.tableData, 'children')
  },
  methods:{

    // 数据处理
    tableDataHandle(arr, key, level = 0, indexLine = []) {
      level = level + 1
      arr.map((item, idx) => {
        item.level = level
        item.indexLine = Object.assign([], indexLine)
        item.indexLine.push(idx)
        item.parentLength = arr.length
        if (item[key]) {
          this.tableDataHandle(item[key], key, level, item.indexLine)
        }
      })
      return arr
    },
    forTableData(arr,isExpand){
        arr.forEach(i =>{
            this.$refs.table.toggleRowExpansion(i,isExpand);
            if(i.children){
                this.forTableData(i.children,isExpand)
        }})
    },
    // 全部关闭
    closeAll() {
        this.forTableData(this.tableData,false)
    },
    // 全部打开
    openAll() {
        this.forTableData(this.tableData,true)
    },
    
    getRowKey(v){
      return v.id
    },
    beforeHandleCommand(index,row,command) {
        return {
            'index':index,
            'row':row,
            'command':command
        }
    },
    handleCommand(command) {
        switch(command.command) {
            case "search":
                this.search(command.index);
                break;
            case "edit":
                this.edit(command.index);
                break;
            case "delete":
                this.rowOperation(command.row.indexLine,"delete",command.row);
                break;
            case "moveTop":
                this.rowOperation(command.row.indexLine,"moveTop",command.row);
                break;
            case "moveUp":
                this.rowOperation(command.row.indexLine,"moveUp",command.row);
                break;
            case "moveDown":
                this.rowOperation(command.row.indexLine,"moveDown",command.row);
                break;
            case "moveBottom":
                this.rowOperation(command.row.indexLine,"moveBottom",command.row);
                break;
        }
    },
    handleCheckAllChange(val){
        this.checkedColumns = val ? columnOptions : [];
        this.isIndeterminate = false;    
    },
    handleCheckedList(val){
        this.checkedColumns=val;
        let checkedCount = val.length;
        this.checkAll = checkedCount === this.columns.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount {
            item.visible=false;
        })
        this.checkedColumns.forEach((item)=>{
            for(let i=0;i{
            for(let i=0;i2) {
            return this.getParent(target.length-1).children[target[target.length-2]];
        }
    }
  }
}



.title{
    float: left;
}
.buttonLeft{
    width:20%;
    margin-right: 40%;
}
.buttonRight{
    width:15%;
}