element-ui el-table表头自定义配置，表格拖动排序

一 需求说明

      表格列太多，页面展示不下，希望可以对表头自定义配置，配置是否展示，宽度，顺序等等。配置绑定用户。

二 需求开发

   2.1在表头右侧添加按钮，使用caption元素，

createCaption() {
  const caption = document.createElement('caption'); // 创建元素
  caption.innerHTML = ''; // 图标样式
  document.querySelector('table').appendChild(caption); // 选择table标签并添加caption
  caption.addEventListener('click', () => { // 点击事件
    this.setTableHead();
  });
},

效果如下图：

 

2.2 点击弹窗展示设置页面

 setTableHead() {
   this.tableHeadsListCopy = _.cloneDeep(this.tableHeadsList); // this.tableHeadsList是从后端接口获取的表头数据
   this.$refs.tableHead.isTableHead = true;
 },


// tableHeadsList示例
tableHeadsList: [
        { width: 'auto', isShow: true, isAuto: true, label: '新垣结一', prop: 'xxx' },
        { width: 'auto', isShow: true, isAuto: true, label: '石原里美', prop: 'xxx' },
        { width: 'auto', isShow: true, isAuto: true, label: '桥本爱', prop: 'xxx' },
        { width: 'auto', isShow: true, isAuto: true, label: '斋藤飞鸟', prop: 'xxx' }
      ],

2.3 弹窗页面

 

http://www.sortablejs.com/options.html    sortablejs文档

参考的文档：https://blog.csdn.net/liub37/article/details/82719211 element表格行列拖拽

 

 

2.4表格主页面

        
          
        
      





// methods

 setTableHead() {
   this.tableHeadsListCopy = _.cloneDeep(this.tableHeadsList); // this.tableHeadsList是从后端接口获取的表头数据
   this.$refs.tableHead.isTableHead = true;
 },

createCaption() {
  const caption = document.createElement('caption'); // 创建元素
  caption.innerHTML = ''; // 图标样式
  document.querySelector('table').appendChild(caption); // 选择table标签并添加caption
  caption.addEventListener('click', () => { // 点击事件
    this.setTableHead();
  });
},

saveTableHead(val) { // 子组件传递过来的保存事件，这里是前端测试版，所以没调用接口
   this.tableHeadsList = [];
   const data = val;
   if (data.every(i => !i.isAuto)) { // 都设定固定宽的话让最后一个表头宽度为自适应
     data[data.length - 1].isAuto = true;
   }
   setTimeout(() => {
     this.tableHeadsList = _.cloneDeep(data);
   });
 },