前端學習（2730）：重讀vue電商網站40之使用vue-table-with-tree-grid

 

安裝新的依賴 vue-tabel-with-tree-grid

vue-tabel-with-tree-grid 官方文檔

安裝完成後，在 main.js 入口文件內先導入 tree-tabel

然後全局註冊組件 tree-tabel

頁面中，我們使用瞭如下屬性：

data 確定我們的數據源，columns定義我們的指定列，selection-type 設置是否打開多選框，expand-type 設置是否展示展開欄，show-index 添加索引列， border 給表格添加邊框。

使用模板列：

通過在columns 設置 type 屬性值爲 template，即可設置模板列。

然後在我們界面表格區域，添加一個 template 模板，然後設置作用域插槽 slot 爲在數據塊定義的模板名稱 isOk