Ant Design of Vue Table 表格可伸縮列
首先說一下個(gè)人觀點(diǎn)，這個(gè)框架坑的一批哪轿，個(gè)人建議如果業(yè)務(wù)或者項(xiàng)目復(fù)雜還是用 Element UI吧
- 首先安裝官方拖動(dòng)插件 vue-draggable-resizable
- 注意這里有個(gè)坑 直接 yarn add 或者 npm 的話是安裝最新包士八，這里需要安裝
"vue-draggable-resizable": "2.1.0"否則你懂的
- 引入官方demo
注意坑來了
- 這里表格
columns里面的寬度必須是Number類型肠槽，否則會(huì)報(bào)錯(cuò)悍缠。 - 如果不設(shè)置
width那么表格會(huì)自動(dòng)計(jì)算寬度雁乡，這里要注意吐葱，如果不設(shè)置width和dataIndex那么該列就不能拖動(dòng)街望，一般最后一列不設(shè)置dataIndex。
如果操作欄要固定的話請(qǐng)繼續(xù)看
- 固定操作欄會(huì)出現(xiàn)固定欄壓在表格上弟跑，出現(xiàn)表格布局錯(cuò)亂灾前，給表格加一個(gè)寬度出現(xiàn)滾動(dòng)條就行了。
- 如果最后一列必須設(shè)置的話孟辑，請(qǐng)?jiān)?最后一個(gè) .resize-table-th 元素加上 overflow: hidden, 否則會(huì)出現(xiàn)橫向滾動(dòng)條哎甲。
.resize-table-th {
position: relative;
&:last-of-type {
overflow: hidden;
}
}
必需得給列設(shè)置寬度（我特么，每列設(shè)置了寬度table右邊就會(huì)出現(xiàn)空白或者屏幕縮小后table出現(xiàn)滾動(dòng)條問題, 要么就是最后一列不設(shè)置寬度饲嗽，那樣就會(huì)自動(dòng)計(jì)算炭玫，但是這樣在分辨率大的屏幕會(huì)出現(xiàn)這一列很寬的情況）。
真特么坑-沒辦法只能獲取寬度自動(dòng)計(jì)算吧
基本思路是獲取容器寬度貌虾，然后動(dòng)態(tài)設(shè)置
columns里面的width 不過這樣的確很麻煩,最好不用固定欄吞加。
如果業(yè)務(wù)需求要用固定欄，個(gè)人慢慢研究吧
