Vue2集成 vue-draggable-resizable 来实现表格可伸缩列
在官网Ant Design Vue案例的表格列可伸缩一直不生效,于是查阅资料自己写了一个能用的。
·
在官网Ant Design Vue案例的表格列可伸缩一直不生效,于是查阅资料自己写了一个能用的。
封装Mixins:
/**
* 表格处理混入mixins
* 引入此 mixins 并给a-table添加 :components="components"可以为表格头新增拖拽功能,
* 注意:表格列的配置描述columns的变量名必须为columns,且必须设置width,且不能用Object.freeze()。
* 如不满足业务可直接在组件中重载数据或方法
*/
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
export default {
data() {
this.components = {
header: {
cell: (h, props, children) => {
const { key, ...restProps } = props
const col = this.columns.find(col => {
const k = col.dataIndex || col.key
return k === key
})
if (!col || !col.width) {
return h('th', { ...restProps }, [...children])
}
const dragProps = {
key: col.dataIndex || col.key,
class: 'table-draggable-handle',
attrs: {
w: 10,
x: col.width,
z: 1,
axis: 'x',
draggable: true,
resizable: false,
},
on: {
dragging: (x, y) => {
col.width = Math.max(x, 1)
},
},
}
const drag = h('vue-draggable-resizable', { ...dragProps })
return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
},
},
}
return {}
},
}
在需要处理的表格中使用:
<a-table
:components="components"
:columns="columns"
:data-source="tableData"
rowKey="id"
>
...
</a-table>
<script>
import draggableResizableTable from '@/mixins/draggableResizableTable'
export default {
mixins: [ draggableResizableTable],
data() {
return {
tableData:[],
columns:[
{
title:'姓名',
dataIndex: 'name',
width:150,
},
{
title:'年龄',
dataIndex: 'age',
width:150,
},
{
title:'地址',
dataIndex: 'adress',
width:150,
},
],
}
}
}
更多推荐
所有评论(0)