用vue写一个使用用antd组件可以列宽拖拽的表格代码
时间: 2023-03-12 10:42:04 浏览: 112
我建议您可以使用 vue-beautiful-dnd 和 antd 组件一起实现可拖拽的表格,代码示例如下:<template>
<div>
<dnd-list :list="list" @update="updateList" />
</div>
</template><script>
import { DndList } from "vue-beautiful-dnd";
import { Table } from "antd";export default {
components: {
DndList
},
data() {
return {
list: [
{
dataIndex: "name",
title: "姓名"
},
{
dataIndex: "age",
title: "年龄"
},
{
dataIndex: "address",
title: "地址"
}
]
};
},
methods: {
updateList(list) {
this.list = list;
}
},
render() {
return (
<Table
bordered
draggable
columns={this.list.map(col => ({
dataIndex: col.dataIndex,
title: col.title
}))}
/>
);
}
};
</script>
阅读全文