vue樹形三級分層控件的使用

渲染出來之后就是這個樣子了

 

1. 使用的話是借用一個vue依賴   ===>   vue-table-with-tree-grid   <=== 在依賴中安裝

2. 在項目的main.js文件中引入並且注冊為全局組件

// 引入樹形控件
import ZkTable from 'vue-table-with-tree-grid'

Vue.component('tree-table', ZkTable)

3. 具體使用,建議把官網的demo復制粘貼過去,然后根據需求改, 因為本人在使用的時候, 因為是需要什么功能, 在tree-table 中添加什么attribute , 所以總是報錯 , 說什么key值不唯一, 反正就是組件渲染出錯, 然后把官方demo中的代碼復制過去, 修改, 就沒有出現問題

<tree-table
        ref="table"
        sum-text="sum"
        index-text="#"
        :data="cateList"
        :columns="columns"
        :stripe="props.stripe"
        :border="props.border"
        :show-header="props.showHeader"
        :show-summary="props.showSummary"
        :show-row-hover="props.showRowHover"
        :show-index="props.showIndex"
        :tree-type="props.treeType"
        :is-fold="props.isFold"
        :expand-type="props.expandType"
        :selection-type="props.selectionType"
      >
// 這里寫模板 template , 和columns中的魔板名字相同
</ tree-table>

　　　　

columns: [{

          label: '是否有效',

          type: 'template',

          template: 'userful',

          width: 100

        }]

在template中使用  slot="name"  指定模板的名字 , 使用 slot-scope="scope" 指定數據源 , 通過 scope.row  拿到當前的數據

<!-- 排序模板 -->
        <template slot="sort" slot-scope="scope">
          <el-tag v-if="scope.row.cat_level === 0">一級</el-tag>
          <el-tag v-else-if="scope.row.cat_level === 1" type="success">二級</el-tag>
          <el-tag v-else type="warning">三級</el-tag>
        </template>

 

Attribute不曉得少了哪個, 反正一直報錯 

直接管他默認的是啥, cv過去, 就沒有報錯了