基于Element.ui和sortable.js--Table表格表头拖拽,自定义表头,自定义列样式,二级表格等

一、表头拖拽

1.下载 sortablejs

yarn add sortablejs -S

2.引入 sortablejs

import Sortable from 'sortablejs';

3.methods 中新增拖拽方法 并在mounted中调用此方法

created(){
    this.columnDrop()
},
methods:{
        // 开启行拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr');
      this.sortable = Sortable.create(wrapperTr, {
        animation: 100,//动画时长
        delay: 0,//在排序拖动开始多少毫秒后元素才开始移动
        filter: '.dragorderNumber',//哪个元素不进行拖拽啊
        chosenClass: 'drag-active',//选中时追加的类名
        onEnd: (option) => {
          let oldIndex = option.oldIndex;
          let newIndex = option.newIndex;
          console.log('旧位置' + oldIndex, '新位置' + newIndex);
          var clonedItems = this.col.filter(item => item);
          clonedItems.splice(newIndex, 0, clonedItems.splice(oldIndex, 1)[0]);
          this.col = [];
          this.$nextTick(() => {
            this.col = clonedItems;
          });
        },
      });
    },
    // 拖拽中的事件
    onMove(env, originalEvent) {
      // 不可被拖拽的元素
      if (originalEvent.target.innerText === '序号') return false
    }
}

二、自定义表头

<el-table size="small" :data="data" border ref="table" :cell-style="handleCellStyle">
    <el-table-column
  :class-name="'drag' + item.prop" //自定义类名
  v-for="(item, index) in col"  //循环 表头数据
  :key="item.id"
  :width="item.label === '序号' ? 73 : ''" //序号宽度固定
  :prop="dropCol[index].prop" //对应的列的数据
  :label="item.label"
  :resizable="false"
>
    <!-- 此为自定义表头 -->
    <template slot="header" slot-scope="scope">
      <span>{{ item.label }}</span>
      <!-- 我的表头筛选组件 -->
      <TableHeaderImg v-if="item.label !== '序号'" @openSortMessage="openSortMessage" />
    </template>
    <!-- 自定义列 -->
    <template slot-scope="scope">
        <span>{{ scope.row[item.prop] }}</span>
    </template>
  </el-table-column>
</el-table>

三、自定义列的样式

产品需求为自定义进度

使用cell-style方法

handleCellStyle({ columnIndex, row, rowIndex }) {
  //rowIndex行的下标 row 此行数据对象 columnIndex列的下标
  if (rowIndex === 0 && columnIndex !== 0 && columnIndex !== 1) {
    return {
      height: '28px',
      background: `linear-gradient(to right, rgba(57, 255, 255, 0.37) ${row['rate' + (columnIndex - 1)]
        }%, #FFF 0%)`,
    };
  }
},

四、二级表格

二级表格使用element的树形结构(tree-props)可能更为方便 ,但是我们的此需求有二级表格拖拽和表格内容区滚动,树形结构就无法使用了,这里采用的是 type="expand" 展开行功能

<el-table size="small" :data="data" :cell-style="handleCellStyle" border ref="table">
  <!-- 自定义的二级表格 因为默认第一列为下拉箭头 宽度设为1同时el-table向左移动1px的方法隐藏掉-->
  <el-table-column type="expand" width="1">
    <template slot-scope="scope">
    <!-- show-header隐藏表头 追加类名设置滚动区域 -->
      <el-table :data="scope.row.children" :show-header="false" class="child-table">
        <el-table-column
          :class-name="'drag' + item.prop"
          v-for="(item, index) in col"
          :key="index"
          :prop="dropCol[index].prop"
          :width="item.label === '序号' ? 73 : ''"
          :label="item.label"
          :resizable="false"
        >
          <template slot-scope="scope">
            <div>
              <p>{{ scope.row[item.prop] }}</p>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
  </el-table-column>
</el-table>