贺卡制作网页,轻松seo优化排名 快排,方案设计评分标准,屏蔽wordpress头像and design vue2版的table表格不能拖拽列的宽度#xff0c;通过vue-draggable-resizable插件实现 我用的是and design 1.7.8的版本#xff0c;先下插件
yarn add vue-draggable-resizable2.1.0我这版本的and design用最新3.0.0以上的插件会有问题#xff0c;实现不了效果通过vue-draggable-resizable插件实现 我用的是and design 1.7.8的版本先下插件
yarn add vue-draggable-resizable2.1.0我这版本的and design用最新3.0.0以上的插件会有问题实现不了效果换了低版本就没问题了 官方也有教使用方法但会报错按照官方的来写需要把ResizeableTitle改成resizeableTitle这样就解决了最开始的报错 官方使用地址 下面是我封装的table公用组件但是这样弄问题很多在表格里加一下操作的时候很容易有问题所以谨慎用这玩意
templatediv classtableCommon-wrappera-tablev-ifistrue:expandIconColumnIndexexpandIconColumnIndex :expandIconAsCellexpandIconAsCell:defaultExpandAllRowsdefaultExpandAllRows :columnscolumns :dataSourcedata :loadingloading:indentSizeindentSize :paginationpagination :row-selectionrowSelection:childrenColumnNamechildrenColumnName sizemiddle :customHeaderRowtableHeader changehandleTableChange:rowKeyrowkey :scrollscroll :borderedbordered :hideDefaultSelectionshideDefaultSelections:componentscomponentstemplate slot-scopetext, record, index :slotslotv-forslot in Object.keys($scopedSlots).filter(key key ! expandedRowRender)slot :nameslot v-bind{ text, record, index }/slot/template/a-table/div
/templatescript
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}classresize-table-th{children}vue-draggable-resizablekey{col.key}classtable-draggable-handlew{10}x{draggingState[key] || col.width}z{1}axisxdraggable{true}resizable{false}onDragging{onDrag}onDragstop{onDragstop}//th);}}};this.istruetrue;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);}}
}
/scriptstyle langscss
.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-theadtrth {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
