工业和信息化网站备案系统中国建设银官方网站

and design vue2版的table表格不能拖拽列的宽度，通过vue-draggable-resizable插件实现
我用的是and design 1.7.8的版本，先下插件

yarn add vue-draggable-resizable@2.1.0

我这版本的and design用最新3.0.0以上的插件会有问题，实现不了效果，换了低版本就没问题了
官方也有教使用方法，但会报错，按照官方的来写，需要把ResizeableTitle改成resizeableTitle这样就解决了最开始的报错

官方使用地址
下面是我封装的table公用组件，但是这样弄问题很多，在表格里加一下操作的时候很容易有问题，所以谨慎用这玩意

<template><div class="tableCommon-wrapper"><a-tablev-if="istrue":expandIconColumnIndex="expandIconColumnIndex" :expandIconAsCell="expandIconAsCell":defaultExpandAllRows="defaultExpandAllRows" :columns="columns" :dataSource="data" :loading="loading":indentSize="indentSize" :pagination="pagination" :row-selection="rowSelection":childrenColumnName="childrenColumnName" size="middle" :customHeaderRow="tableHeader" @change="handleTableChange":rowKey="rowkey" :scroll="scroll" :bordered="bordered" :hideDefaultSelections="hideDefaultSelections":components="components"><template slot-scope="text, record, index" :slot="slot"v-for="slot in Object.keys($scopedSlots).filter(key => key !== 'expandedRowRender')"><slot :name="slot" v-bind="{ text, record, index }"></slot></template></a-table></div>
</template><script>
import Vue from "vue";
import VueDraggableResizable from "vue-draggable-resizable";
Vue.component("vue-draggable-resizable", VueDraggableResizable);export default {name: 'ttable',props: {childrenColumnName: {type: String},rowkey: {type: String},tableHead: {type: Array,required: true},tableData: {type: Array,required: true},loading: {type: Boolean,default: false},indentSize: {// eslint-disable-next-line vue/require-prop-type-constructortype: Boolean | Number},pagination: {// eslint-disable-next-line vue/require-prop-type-constructortype: Boolean | Object},rowSelection: {type: Object},scroll: {type: Object,// default:()=> ({x: 1200, y: 600}) ,},expandIconAsCell: {type: Boolean},expandIconColumnIndex: {type: Number},size: {// eslint-disable-next-line vue/require-prop-type-constructortype: String | Number},bordered: {type: Boolean,default: true},defaultExpandAllRows: {type: Boolean,default: false},hideDefaultSelections: {type: Boolean,default: false}},data() {return {data:[],columns:[],istrue:false,}},watch:{tableHead(newdata){console.log('表格头部',newdata)this.columns = JSON.parse(JSON.stringify(newdata));},tableData(newdata){console.log('表格数据',newdata)this.data = JSON.parse(JSON.stringify(newdata));}},mounted(){this.init()},methods: {init(){console.log('阿里嘎多',this.tableHead)const draggingMap = {};this.columns = JSON.parse(JSON.stringify(this.tableHead));// this.columns = columns;this.data = JSON.parse(JSON.stringify(this.tableData));this.columns.forEach(col => {draggingMap[col.key] = col.width;});const draggingState = Vue.observable(draggingMap);const that = this;this.components = {header: {cell: (h, props, children) => {let thDom = null;const { key, ...restProps } = props;const col = that.columns.find(col => {const k = col.dataIndex || col.key;return k === key;});if (!col.width) {return <th {...restProps}>{children}</th>;}const onDrag = (x, y) => {draggingState[key] = 0;col.width = Math.max(x, 1);};const onDragstop = () => {draggingState[key] = thDom.getBoundingClientRect().width;};return (<th{...restProps}v-ant-ref={r => (thDom = r)}width={col.width}class="resize-table-th">{children}<vue-draggable-resizablekey={col.key}class="table-draggable-handle"w={10}x={draggingState[key] || col.width}z={1}axis="x"draggable={true}resizable={false}onDragging={onDrag}onDragstop={onDragstop}/></th>);}}};this.istrue=true;console.log('来阿拉啦啦啦',this.components)},tableHeader(column) {// console.log("column",column);column.forEach((e, index) => {column[index].className = 'table-thead';});},handleTableChange(val) {console.log("valllsadlalsdlsa:",val);this.$emit('changeCurrent', val.current);}}
}
</script><style lang='scss'>
.resize-table-th {position: relative;.table-draggable-handle {height: 100% !important;bottom: 0;left: auto !important;right: -5px;cursor: col-resize;touch-action: none;}
}::v-deep .ant-table-thead>tr>th {background: #f6f6f6;height: 50px;font-family: PingFang SC-Medium, PingFang SC;
}::v-deep .ant-table-tbody {background-color: #ffffff;
}::v-deep .ant-table-header-column .ant-table-column-title {font-size: 15px;font-weight: bold;font-family: Microsoft YaHei-Bold, Microsoft YaHei;color: #333333;
}
</style>