【ant Design Vue】a-table中可伸缩列不能使用的问题
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
【ant Design Vue】a-table的可伸缩列不能使用的问题。
开发中需要了这种需求,复制了官网的案例结果发现各种报错,记录一下我遇到的问题。
1、vue-draggable-resizable版本号改为2.1.0
npm install --save vue-draggable-resizable@2.1.0
2、注意检查是否对columns使用过 Object.freeze(),冻结过不生效
3、columns中必须设置宽度,如下面设置宽度width:90
columns:[ {
title: '指标值',
dataIndex: 'value',
width: 90,
},]
4、封装了mixins,在表格中引入即可
:components="components"
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
console.log('ResizeableTitle', key)
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 {}
},
}
此外记得加上样式
<style>
.resize-table-th {
position: relative;
}
.table-draggable-handle {
/* width: 10px !important; */
height: 100% !important;
left: auto !important;
right: -5px;
cursor: col-resize;
touch-action: none;
border: none;
}
</style> `
5、完整版代码
<template>
<a-table bordered :columns="columns" :components="components" :data-source="data">
<template v-slot:action>
<a href="javascript:;">Delete</a>
</template>
</a-table>
</template>
<script>
import Vue from 'vue'
import VueDraggableResizable from 'vue-draggable-resizable'
Vue.component('vue-draggable-resizable', VueDraggableResizable)
export default {
name: 'App',
data() {
this.components = {
header: {
cell: (h, props, children) => {
const { key, ...restProps } = props
console.log('ResizeableTitle', key)
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 {
data: [
{
key: 0,
date: '2018-02-11',
amount: 120,
type: 'income',
note: 'transfer'
},
{
key: 1,
date: '2018-03-11',
amount: 243,
type: 'income',
note: 'transfer'
},
{
key: 2,
date: '2018-04-11',
amount: 98,
type: 'income',
note: 'transfer'
}
],
columns: [
{
title: 'Date',
dataIndex: 'date',
width: 200
},
{
title: 'Amount',
dataIndex: 'amount',
width: 100
},
{
title: 'Type',
dataIndex: 'type',
width: 100
},
{
title: 'Note',
dataIndex: 'note',
width: 100
},
{
title: 'Action',
key: 'action',
scopedSlots: { customRender: 'action' }
}
]
}
}
}
</script>
<style>
.resize-table-th {
position: relative;
}
.table-draggable-handle {
/* width: 10px !important; */
height: 100% !important;
left: auto !important;
right: -5px;
cursor: col-resize;
touch-action: none;
border: none;
}
</style>
GitHub 加速计划 / vu / vue
207.52 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:1 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 3 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 3 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)