element table表格常用方法

table添加拖拽事件

npm install sortable.js --save

<template>
  <div>
    <el-table :data="tableData"
      border
      :row-key="getRowKey"
      align="left">
     <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column>
    </el-table>  
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        }
      ],
      tableData: [
        {
          ids: '1',
          date: '2016-05-02',
          name: '王小虎1',
          address: '上海市普陀区金沙江路 100 弄'
        },
        {
          ids: '2',
          date: '2016-05-04',
          name: '王小虎2',
          address: '上海市普陀区金沙江路 200 弄'
        },
        {
          ids: '3',
          date: '2016-05-01',
          name: '王小虎3',
          address: '上海市普陀区金沙江路 300 弄'
        },
        {
          ids: '4',
          date: '2016-05-03',
          name: '王小虎4',
          address: '上海市普陀区金沙江路 400 弄'
        }
      ]
    }
  },
  mounted() {
  // 阻止默认行为
     document.body.ondrop = function (event) {
       event.preventDefault();
       event.stopPropagation();
     };
    this.rowDrop()
    this.columnDrop()
  },
  methods: {
    getRowKey(row){
      return row.ids
    },
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tableData.splice(oldIndex, 1)[0]
          _this.tableData.splice(newIndex, 0, currRow)
        }
      })
    },
    //列拖拽
    columnDrop() {
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      this.sortable = Sortable.create(wrapperTr, {
        animation: 180,
        delay: 0,
        onEnd: evt => {
          const oldItem = this.dropCol[evt.oldIndex]
          this.dropCol.splice(evt.oldIndex, 1)
          this.dropCol.splice(evt.newIndex, 0, oldItem)
        }
      })
    }
  }
}
</script>

table 多选框 设置只能单选

    selectK3(selection, row) {
      if (selection.length > 1) {
        let del_row = selection.shift()
        this.$refs.k3MultipleSqlTable.toggleRowSelection(del_row, false)
      }
    },
    selectAllK3(selection) {
      if (selection.length > 1) {
        selection.length = 1
      }
    },
    rowK3Click(data) {
      this.$refs.k3MultipleSqlTable.toggleRowSelection(data)
      if (this.multipleSelectionK3.length > 1) {
        let del_row = this.multipleSelectionK3.shift()
        this.$refs.k3MultipleSqlTable.toggleRowSelection(del_row, false)
      }
    },
       handleSelectionChangeK3(val) {
      this.multipleSelectionK3 = val;
    },