1.2.1 • Published 3 years ago
element-table-sortable v1.2.1
ElementTableColumnSortable
作用
对 element 表格列的以下自定义配置 进行用户级保存
- 拖拽排序
- 拖拽宽度
- 固定左/右
使用
npm
npm i element-table-sortable
main.js 引用
import ElementTableSortable from 'element-table-sortable';
Vue.use(ElementTableSortable);
temp.vue
<el-button @click="SortableTable.show()">打开设置面板</el-button>
<el-table
@header-dragend="SortableTable.handleHeaderDragend"
@header-contextmenu="SortableTable.handleHeaderContextmenu"
>
<template v-for="(col, index) in dropCols">
<el-table-column
:key="`col_${index}_${col.prop}_${col.width || 'auto'}`"
:prop="col.prop"
:label="col.label"
:width="col.width || 'auto'"
:fixed="col.fixed || false"
class-name="drag-element"
>
<template slot-scope="scope">
<template v-if="col.prop === 'action'">
<el-button>查看</el-button>
</template>
<span v-else>{{ scope.row[col.prop] }}</span>
</template>
</el-table-column>
</template>
</el-table>
export default {
data() {
return {
/*** 拖拽自定义表头 */
SortableTable: {
show: () => {},
handleHeaderDragend: () => {},
handleHeaderContextmenu: () => {},
},
defaultLabels: [
{ label: 'aaaa', prop: 'a', isCheck: true, disabled: false },
{ label: 'bbb', prop: 'b', isCheck: true, disabled: false },
{ label: '操作', prop: 'action', isCheck: true, disabled: false },
],
dropCols: [],
};
},
mounted() {
/** 拖拽自定义表头 */
this.SortableTable = this.$initElementTableSortable({
el: '.el-table__header-wrapper tr', //拖拽handle的父容器
// dragElement: String, //非必填,默认为".draggable",拖拽识别handle
defaultLabels: this.defaultLabels,
// startIndex: Number, //非必填,默认为0,计算拖拽的起始index;如果表格第1列是不拖拽的selection列,startIndex=1
sortableTableCode: this.$options.name, //一个自定义CODE,用于记录配置json的key
// setRemoteApi: Promise, // 非必填,入参为{code:sortableTableCode,tabulationTitleDTOS:newLabelsArray},newLabelsArray是defaultLabels重排后,各数组内对象加上{sort:index}的数组
// getRemoteApi: Promise,// 非必填,返回类defaultLabels的数据
handleColumn: this.handleColumn, //返回处理后的表配置
});
},
methods: {
handleColumn(data) {
this.dropCols = data;
},
},
};