Vue項目中使用樹形控件 vue-table-width-tree-grid

Vue項目中使用樹形控件 vue-table-width-tree-grid

需要實現的整體效果如下：

這個樹形結構組件ElementUI是沒有提供的，我們需要依賴第三方插件來完成。

一、安裝tree-table組件

（1）Vue 可視化工程vue UI來安裝：

我們打開VUE的可視化面板（在cmd控制檯輸入“vue ui”指令，如何安裝之前在環境搭建時講解過），找到“依賴”模塊，點擊右上角“安裝依賴”：

在對話框中，在“運行依賴”下搜索“vue-table-with”插件

安裝完畢後會在依賴列表看到此插件：

（2）第二張安裝方法是：直接用node的npm install的方法來下載安裝：

npm i vue-table-with-tree-grid -S

main.js中註冊

import TreeTable from 'vue-table-with-tree-grid'  //表格 樹形組件
Vue.component('tree-table',TreeTable);           //自定義註冊tree-table 標籤組件

二、使用tree-table組件

組件註冊完畢後，我們在Cate.vue中使用該組件，在原來留好的“表格區域”放置該組件標籤“<tree-table>”

 

 tree-table的使用我們可以查看官方文檔（https://github.com/MisterTaki/vue-table-with-tree-grid），主頁有介紹和API表格，master分支下有一個demo可以供我們學習：

 首先我們需要通過“:data”來綁定需要展示的數據對象；“columns”是綁定的表格各列的配置對象，可以配置各列的名稱、屬性名、對齊方式和寬度等：

 官方的columns寫法如下：

columns: [
  {
    label: 'name',
    prop: 'name',
    width: '400px',
  },
  {
    label: 'sex',
    prop: 'sex',
    minWidth: '50px',
  },
  {
    label: 'score',
    prop: 'score',
  },
  {
    label: 'likes',
    prop: 'likes',
    minWidth: '200px',
    type: 'template',
    template: 'likes',
  },
]

三、實現商品分類基本樹形效果

我們在Cate組件中編輯tree-table，添加data和columns綁定，其中的catelist是上一篇我們訪問後拿到的商品分類對象數組，columns對象就是列定義對象：

<!-- 表格區域 --><!-- 樹形組件 -->
<tree-table :data="catelist" :columns="columns">
</tree-table>

我們在數據區定義columns對象： 

columns: [
    {
        label: '分類名稱',
        prop: 'cat_name'
    }
]

 這個時候我們就實現了最基本的分類指標樹形展示了，查看頁面

 去除前面的複選框，在標籤中添加“selection-type="false"”就可以了；去除展開行使用“expand-type="false"”，然後再使用“show-index="true"”添加默認行號，使用“:border="true"”添加一個列與列之前的分隔線。

<tree-table :data="catelist" :columns="columns" 
    :selection-type="false" :expand-type="false" :show-index="true" :border="true">
</tree-table>

效果圖：

code

 <template>
  <div>
    <!--  麪包屑-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首頁</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分類</el-breadcrumb-item>
    </el-breadcrumb>
    <!--  卡片視圖區-->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary">添加分類</el-button>
        </el-col>
      </el-row>
      <!--    表格區-->
      <tree-table :data="catelist" :columns="columns" :selection-type="false" :expand-type="false"
                  :show-index="true" index-text="#" border>
        <!--        是否有效slot模板-->
        <template slot="isOk" slot-scope="scope">
          <i class="el-icon-success" v-if="scope.row.cat_deleted === false" style="color: #38ce7a"></i>
          <i class="el-icon-error" v-else style="color: red"></i>
        </template>
        <!--        排序slot模板-->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一級</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1">二級</el-tag>
          <el-tag type="warning" size="mini" v-else>三級</el-tag>
        </template>
        <!--        操作slot模板-->
        <template slot="opt" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini"></el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini"></el-button>
        </template>
      </tree-table>
      <!--    分頁區-->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 重新條件
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      catelist: [],  //商品分類數據-默認是空
      total: 0,  //總數據條數
      // 爲table制定列的定義
      columns: [{
        label: '分類名稱',
        prop: 'cat_name',

      },
        {
          label: "是否有效",
          type: "template",  //表面-將當前列設定爲模板列
          template: 'isOk'
        },
        {
          label: "排序",
          type: "template",  //表面-將當前列設定爲模板列
          template: 'order'
        },
        {
          label: "操作",
          type: "template",  //表面-將當前列設定爲模板列
          template: 'opt'
        }
      ],
    }
  },
  created() {
    this.getCateList()
  },
  methods: {
    // 獲取數據商品列表
    async getCateList() {
      const {data: res} = await this.$http.get('categories', {params: this.queryInfo})
      if (res.meta.status !== 200) {
        return this.$message.error('獲取商品列表失敗！')
      }
      console.log(res.data.result)
      // 把數據賦值給catelist
      this.catelist = res.data.result
      // 爲總數據條數賦值
      this.total = res.data.total
      this.$message.success('獲取商品列表成功！')
    }
  }
}
</script>

<style scoped lang="less">

</style>