vue column 列寬拖動

vue.js vue

terpoo1250 2019-10-30 17:04:37 ‧ 2160 瀏覽

分享至

我是參考：參考網站
想加入列寬拖動的js，請問我該加在哪裡？

我的vue code:

<el-table-column prop="Name"
                         label="專案名稱"
                         sortable
                         show-overflow-tooltip="true"
                         min-width="80">
        </el-table-column>
        <el-table-column prop="CustomerID"
                         label="客戶"
                         sortable
                         min-width="100">
        </el-table-column>

我想說加改成：

<el-table-column prop="Name"
                         label="專案名稱"
                         sortable
                         width-drag
                         min-width="80">
        </el-table-column>
        <el-table-column prop="CustomerID"
                         label="客戶"
                         sortable
                         width-drag
                         min-width="100">
        </el-table-column>

可是這樣build出來是失敗的...？
是我加錯地方嗎？
謝謝各位

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

3 個回答

咖咖拉

iT邦好手 1 級 ‧ 2019-10-30 17:12:47

這套件列寬拖动文件是寫

column-width-drag

你的CODE是

width-drag

可能是這問題

回應 1
分享
檢舉

terpoo1250 iT邦新手 5 級 ‧ 2019-10-30 17:19:14 檢舉

 <el-table-column prop="Name"
                         label="專案名稱"
                         sortable
                         width-drag 
                         min-width="80">
        </el-table-column>
        <el-table-column prop="CustomerID"
                         label="客戶"
                         sortable
                         width-drag
                         min-width="100">
        </el-table-column>

其實這樣我也有試過，謝謝你...只是好奇不知道是不是vue本身沒有支援這個元件...

登入發表回應

dragonH

iT邦超人 5 級 ‧ 2019-10-30 17:22:43

你用的是 element-ui 的 el-table

卻去參考 vue-easytable 的 doc

你確定可以直接這樣用嗎

回應 6
分享
檢舉

看更多先前的回應...收起先前的回應...

terpoo1250 iT邦新手 5 級 ‧ 2019-10-30 17:25:42 檢舉

原來他們兩個是不一樣的阿...

dragonH iT邦超人 5 級 ‧ 2019-10-30 17:28:02 檢舉

對阿

我在 doc 也找不到說可以這樣用

terpoo1250 iT邦新手 5 級 ‧ 2019-10-30 17:33:44 檢舉

那...是不是要實現列寬拖動的動作，要自己寫js阿...？

dragonH iT邦超人 5 級 ‧ 2019-10-30 17:35:58 檢舉

terpoo1250

理論上是阿

不過你也可以把你的 el-table 換成 vue-easytable

就像你看到的

他本身就有這功能

阿展展展 iT邦好手 1 級 ‧ 2019-10-30 20:32:02 檢舉

我知道我知道!!! 汽車用機車零件!!!!

dragonH iT邦超人 5 級 ‧ 2019-10-30 22:38:31 檢舉

登入發表回應

froce

iT邦大師 1 級 ‧ 2019-10-31 08:20:56

最近忙到現在才有時間來回這種要翻文件的問題...Orz

日期欄位可變動寬度
element-ui的話，在Table-column加個resizable就行啦...沒去翻過api？
table

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

dragonH iT邦超人 5 級 ‧ 2019-10-31 09:05:49 檢舉

我用 drag 去找難怪沒找到

terpoo1250 iT邦新手 5 級 ‧ 2019-10-31 09:11:37 檢舉

froce
我試過這個方法，可是他一樣無法呈現出來...

 <el-table-column prop="Name"
                         label="專案名稱"
                         sortable
                         resizable
                         min-width="80">
        </el-table-column>

一樣沒辦法...

dragonH iT邦超人 5 級 ‧ 2019-10-31 09:19:09 檢舉

terpoo1250

我弱弱的問一下

你該不會 table 沒加 border 吧

 <el-table :data="tableData" border style="width: 100%">

terpoo1250 iT邦新手 5 級 ‧ 2019-10-31 10:59:27 檢舉

因為我原本的沒有用
<el-table border style="width: 100%">
包起來
變成這樣之後

<el-table border style="width: 100%">
          <el-table-column prop="Name"
                           label="專案名稱"
                           sortable
                           resizable
                           min-width="80">
          </el-table-column>
          <el-table-column prop="CustomerID"
                           label="客戶"
                           sortable
                           resizable
                           min-width="100">
          </el-table-column>
          </el-table>

整個格式都跑掉了
還是我加錯地方...