vue -- element表格行列拖拽
作者:互联网
element ui 表格没有自带的拖拽排序的功能,只能借助第三方插件Sortablejs来实现,并实现禁止某列被拖拽,用了如下参数handle,filter,preventOnFilter,draggable,配置地址:http://www.sortablejs.com/options.html
1、npm安装sortable.js
$ npm install sortablejs --save
2、新建一个公用组件 Sortable.vue
<template> <div></div> </template> <style> </style> <script> import Sortable from 'sortablejs' export default { data () { return { } }, props: [ 'tableData', 'dropCol','col' ], mounted () { console.log(this.tableData,this.dropCol); this.rowDrop() this.columnDrop() }, methods: { // 行拖拽 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, handle: ".allowDrag", // 格式为简单css选择器的字符串,使列表单元中符合选择器的元素成为拖动的手柄,只有按住拖动手柄才能使列表单元进行拖动 filter: ".noDrag", // 过滤器,不需要进行拖动的元素 preventOnFilter: true, // 在触发过滤器`filter`的时候调用`event.preventDefault()` draggable: ".allowDrag", // 允许拖拽的项目类名 onEnd: evt => { const oldItem = this.dropCol[evt.oldIndex-1] -num是多少列被禁止 this.dropCol.splice(evt.oldIndex-1, 1) this.dropCol.splice(evt.newIndex-1, 0, oldItem) } }) } } } </script>
3、在需要得页面应用组件
<template> <div> <sortableJs v-bind:tableData="tableData" v-bind:dropCol="dropCol" v-bind:col="col"></sortableJs> <el-table ref="multipleTable" :data="tableData" row-key="id" show-summary border stripe height="600" row-class-name="tableRow" header-row-class-name="tableHeader" @row-dblclick="handleSelectionChange" style="width: 100%; border-top: 1px solid #c5c5c5" > <el-table-column type="selection" class-name="noDrag" width="55"> </el-table-column> <!-- <el-table-column type="index" label="序号" width="55"> </el-table-column> --> <el-table-column v-for="(item, index) in col" :key="`col_${index}`" :prop="dropCol[index].propName" :label="item.title" class-name="allowDrag" width="150" > </el-table-column> </el-table> </div> </template>
col: [ { id: '1', title: '序号', propName: 'id', }, { id: '2', title: '时间', propName: 'date', }, { id: '3', title: '地址', propName: 'province', }, { id: '4', title: '星标', propName: 'city', }, { id: '5', title: '主题', propName: 'address', } ], dropCol: [ { id: '1', title: '序号', propName: 'id', }, { id: '2', title: '时间', propName: 'date', }, { id: '3', title: '地址', propName: 'province', }, { id: '4', title: '星标', propName: 'city', }, { id: '5', title: '主题', propName: 'address', } ], tableData: [ { date: '2016-05-02', id: '1', province: '地址11', city: '合作中', address: 'A类' }, { id: '2', date: '2016-05-04', province: '地址002', city: '未合作', address: 'A类' }, { id: '3', date: '2016-05-01', province: '地址11003', city: '中断', address: 'A类',
}, { id: '4', date: '2016-05-03', province: '地址104', city: '未合作', address: 'A类', }, ],
标签:city,vue,dropCol,title,--,element,propName,address,id 来源: https://www.cnblogs.com/juewuzhe/p/14154296.html