Ant Design of Vue Table 表格可伸縮列
首先說(shuō)一下個(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
注意坑來(lái)了
- 這里表格
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)條問(wèn)題, 要么就是最后一列不設(shè)置寬度，那樣就會(huì)自動(dòng)計(jì)算，但是這樣在分辨率大的屏幕會(huì)出現(xiàn)這一列很寬的情況）。
真特么坑-沒(méi)辦法只能獲取寬度自動(dòng)計(jì)算吧
基本思路是獲取容器寬度，然后動(dòng)態(tài)設(shè)置
columns里面的width 不過(guò)這樣的確很麻煩,最好不用固定欄。
如果業(yè)務(wù)需求要用固定欄，個(gè)人慢慢研究吧
