标签：vue 表格 tree 树形 grid template 组件 table 模板

element-ui组件库可以解决工作中的需求，但当我们需要树形结构的表格时，我们就需要第三方组件实现此功能了。
GitHub链接: 树形表格组件.

1.安装组件

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

2.在main.js文件中引入组件

//引入vue-table-with-tree-grid
import ZkTable from 'vue-table-with-tree-grid'
//安装vue-table-with-tree-grid
Vue.use(ZkTable)

3.部分代码参考

GitHub的example: 树形表格组件应用示例.

  <zk-table class="treeTable" 
            :data="cateList" 
            :columns="columns" 
            :selection-type="false"
            :expand-type="false" 
            show-index 
            border 
            :show-row-hover="false">
        <!--是否有效-->
        <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: lightgreen"></i>
        </template>
        <!--排序-->
        <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>
        <!--操作-->
        <template slot="opt" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.cat_id)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCateById(scope.row.cat_id)">删除</el-button>
        </template>
      </zk-table>
<script>
export default {
  name: "Categories",
  data() {
    return {
      columns: [
        {label: '分类名称', prop: 'cat_name',},
        {
          label: '是否有效',
          //将当前列表页定义为模板页
          type: 'template',
          //当前这一列使用模板名称
          template: 'isok',
        },
        {
          label: '排序',
          //将当前列表页定义为模板页
          type: 'template',
          //当前这一列使用模板名称
          template: 'order',
        },
        {
          label: '操作',
          //将当前列表页定义为模板页
          type: 'template',
          //当前这一列使用模板名称
          template: 'opt',
        },
      ],
      }
</script>

4.树形表格组件的属性及事件

GitHub链接: 树形表格组件属性.

GitHub链接: 树形表格组件Columns Configs.

GitHub链接: 树形表格组件事件.

标签：vue,表格,tree,树形,grid,template,组件,table,模板
来源： https://blog.csdn.net/qq_51218777/article/details/120104104

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