2021-08-23

elementui的表格组件支持整行拖动改变排序

	<el-table
          :default-sort="{ prop: 'sortNum', order: 'ascending' }"
          :data="list"
          border
          align="left"
        >
          <el-table-column
            show-overflow-tooltip
            v-for="(item, index) in col"
            :key="`col_${index}`"
            :prop="col[index].prop"
            :label="item.label"
          >
            <template slot-scope="scope">
              <p>{{ scope.row[item.prop] }}</p>
            </template>
          </el-table-column>
        </el-table>

js部分

col: [
{
label: ‘序号’,
prop: ‘sortNum’
},
{
label: ‘序号’,
prop: ‘sortNum’
},
{
label: ‘经办人’,
prop: ‘operator’
},
{
label: ‘操作’,
prop: ‘isClick’
}
],

methods: {

rowDrop () {
  const tbody = document.querySelector('.el-table__body-wrapper tbody')
  Sortable.create(tbody)
}

},
mounted () {

this.rowDrop()

}
注意list的属性要对应到col的属性