标签：vue 树结构 tree TreeTable prop template table label

// 导入TreeTable

import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)

或者

import TreeTable from 'vue-table-with-tree-grid'
Vue.use(TreeTable)

使用

 <!-- 分类表格  -->
    <tree-table
      :data="datalist"
      :columns="columns"
      :selection-type="false"
      :expand-type="false"
      show-index
      index-text="#"
      border
      :show-row-hover="false"
    >
      <!-- 是否有效区域， 设置对应的模板列： slot="isok"(与columns中设置的template一致) -->
      <template slot="isok" slot-scope="scope">
        <i
          class="el-icon-success"
          v-if="scope.row.cat_deleted === false"
          style="color: lightgreen"
        ></i>
        <i class="el-icon-error" v-else style="color: red"></i>
      </template>

      <template slot="order" slot-scope="scope">
        <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
        <el-tag size="mini" type="success" v-else-if="scope.row.cat_level === 1"
          >二级</el-tag
        >
        <el-tag size="mini" type="warning" v-else-if="scope.row.cat_level === 2"
          >三级</el-tag
        >
      </template>

      <template slot="opt" slot-scope="scope">
        <el-button size="mini" type="primary">操作</el-button>
        <el-button size="mini" type="danger">删除</el-button>
      </template>
    </tree-table>

//添加列表

<script>
export default {
  data() {
    return {
      //   treeTable
      columns: [
        { label: "分类名称", prop: "cat_name" },
        { label: "是否有效", prop: "", type: "template", template: "isok" },
        { label: "排序", prop: "", type: "template", template: "order" },
        { label: "操作", prop: "", type: "template", template: "opt" },
      ],
    };
  },
</script>

标签：vue,树结构,tree,TreeTable,prop,template,table,label
来源： https://www.cnblogs.com/hf10/p/13903456.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。