vue中的树形表格_vue树形表格

实现效果

树形数据的结构

[{
    id: 'd4ffbce3084b7fbc351ae20482af6686',
    pid: '',
    content: '水果',
    states: 0,
    price: 0,
    children: [
      {
        id: '7240ad50e5bf1c2b158ba117bd61a362',
        pid: 'd4ffbce3084b7fbc351ae20482af6686',
        content: '苹果',
        states: 0,
        price: 10
      }, {
        id: '74768f31c97ed831cc20d7ca3cc5fe40',
        pid: 'd4ffbce3084b7fbc351ae20482af6686',
        content: '橘子',
        states: 1,
        price: 30
      }
    ]
  }
]

代码实现

keyPoints：

使用vue-table-with-tree-grid

使用方法：
1.安装依赖：npm i vue-table-with-tree-grid -S
2.main.js中全局引入和注册

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

3.使用
模板：

<zk-table class="tree-table"
      sum-text="总和"
      :data="labelList"
      :columns="columns"
      border
      stripe
      show-row-hover
      show-index
      show-summary
      :selection-type="false"
      :expand-type="false"
      :is-fold="false"
      index-text="#"
>
	<!-- 是否有效 -->
	<template slot="isOk" slot-scope="scope">
		<i v-if="!scope.row.states" class="el-icon-success" style="color:lightgreen" />
		<i v-else class="el-icon-error" style="color:#F56C6C" />
	</template>
	<!-- 排序层级 -->
	<template slot="level" slot-scope="scope">
		<el-tag v-if="scope.row.pid.trim().length===0" size="mini">
		  一级
		</el-tag>
		<el-tag v-else size="mini" type="warning">
		  二级
		</el-tag>
	</template>
	<!-- 操作 -->
	<template slot="opt" slot-scope="scope">
		<el-button circle type="primary" size="mini" icon="el-icon-edit-outline"
		           @click="EditLabel(scope.row)"
		/>
	</template>
</zk-table>

js:

data () {
	return {
	  // 标签列表数据
	  labelList: [
	    {
	      id: 'd4ffbce3084b7fbc351ae20482af6686',
	      pid: '',
	      content: '水果',
	      states: 0,
	      price: 0,
	      children: [
	        {
	          id: '7240ad50e5bf1c2b158ba117bd61a362',
	          pid: 'd4ffbce3084b7fbc351ae20482af6686',
	          content: '苹果',
	          states: 0,
	          price: 10
	        }, {
	          id: '74768f31c97ed831cc20d7ca3cc5fe40',
	          pid: 'd4ffbce3084b7fbc351ae20482af6686',
	          content: '橘子',
	          states: 1,
	          price: 30
	        }
	      ]
	    }
	  ],
	
	  // 列表的列的配置项
	  columns: [
	    {
	      label: '标签名称',
	      prop: 'content'
	    },
	    {
	      label: '价格',
	      prop: 'price'
	    },
	    {
	      label: '是否有效',
	      type: 'template',// 将当前列定义为模板列
	      template: 'isOk'// 当前这一列使用模板名称
	    },
	    {
	      label: '排序',
	      type: 'template',
	      template: 'level'
	    },
	    {
	      label: '操作',
	      type: 'template',
	      template: 'opt'
	    }
	  ]
	}
}

官方地址：vue-table-with-tree-grid