element 表格拖拽保存插件

这是以前看着一篇文章

1.下载包
npm install sortablejs --save
2.在页面中引入，或者全局引入
import Sortable from ‘sortablejs’
3.在template中

<div id="second">
  <el-table
    class="threeTable"
    :style="{'height':tableData.length === 0 ? '100px' : 'auto'}"
    :data="tableData"
    stripe
    style="width: 100%;"
    highlight-current-row
    :header-cell-style="headerCellStyle"
    row-key="proCode">
    <el-table-column type="index" label="序号" width="58"></el-table-column>
    <el-table-column prop="proCode" label="供方编码"></el-table-column>
    <el-table-column prop="proDesc" label="供方名称"></el-table-column>
    <el-table-column label="操作" width="80">
      <template slot-scope="scope">
      <el-tooltip class="tree-item" effect="dark" content="删除" placement="top">
        <el-button type="text" class="" @click="deleteTable(scope.row, scope.$index)"><icon-svg icon-class="iconshanchu" /></el-button>
      </el-tooltip>
      </template>
    </el-table-column>
  </el-table>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

在script中

<script>
	mounted () {
		this.rowDrop()
	},
	methods: {
	   // 行拖拽
       rowDrop () {
        const tbody = document.querySelector('#second .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) // _this.tableData换成自己的表格即可
          }
        })
      },
	}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18