Vue+abp树形表格 | 树形表格

项目中需要用到树形表格，其他同学找了一个ZkTable，我也就跟着用了，不太好用，有更好的记得联系我。先说下缺点，如果这些不能满足你，后面也没必要看了。

缺点如下（也可能我不会用，如果你会一定记得告诉我）：

第一列不能使用模板数据，必须是简单的属性字段，也就不能使用自定义html标签了，如果你用了，不好意思，整个数据显示不出来
单选没有高亮（根本没有单选？），反正我用的多选框代替单选
模板使用的插槽而不是render函数，模板复选框绑定的数据只能单向绑定，即在界面点选可以修改属性值，但是修改属性值不会更新页面选中状态
没有分页
绑定数据不能直接使用属性套vuex中的数据，更新了数据不会刷新页面

使用方法

首先安装插件

yarn add vue-table-with-tree-grid

在页面中引用

<template>

    <zk-table

        ref="table"

        sum-text="sum"

        index-text="#"

        :data="listdata"

        :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 slot="selectChk" scope="scope">

        <Checkbox v-model="chkmodel(scope.row).isChecked"></Checkbox>

        </template>

    </zk-table>

</template>

<script lang="ts">

import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";

import util from "@/lib/util";

import PageRequest from "@/store/entities/page-request";

import AbpBase from "@/lib/abpbase";

import ZkTable from "vue-table-with-tree-grid";

Vue.use(ZkTable);

export default class xxx extends AbpBase{

  props: any = {

    stripe: true, //是否显示间隔斑马纹

    border: true, //是否显示纵向边框

    showHeader: true, //是否显示表头

    showSummary: false, //是否显示表尾合计行

    showRowHover: true, //鼠标悬停时，是否高亮当前行

    showIndex: false, //是否显示数据索引

    treeType: true, //是否为树形表格

    isFold: false, //树形表格中父级是否默认折叠

    expandType: false, //是否为展开行类型表格（为 True 时，需要添加作用域插槽, 它可以获取到 row, rowIndex)

    selectionType: false //是否为多选类型表格

  };

  listdata: any = [];

  get list() {

    return this.listdata;

    //********这里不能直接用vuex的数据做属性，更新了数据界面不会跟新********

    //return this.$store.state.xxx.List;

  }

   async search() {

    request={};

    console.log(this.request)

    await this.$store.dispatch({

      type: "xxx/getList",

      data: request

    });

    this.listdata = this.$store.state.xxx.List;

  }

    chkmodel(row) {

    return this.getChkModel(row.id, this.listdata);

  }

  getChkModel(id, ls: Array<any>) {

    for (let index = 0; index < ls.length; index++) {

      const element = ls[index];

      if (element.id == id) {

        return element;

      }

      if (!!element.children) {

        let c = this.getChkModel(id, element.children);

        if (!!c) {

          return c;

        }

      }

    }

  }

columns = [

    // {

    //   label: "名称",

    //   type: "template",

    //   width: "100px",

    //   template: "namede"

    // },

    {

      label: "名称",

      prop: "name",

      resizable: true

    },

    {

      label: "类型",

      prop: "typeName"

    },

    {

      label: "选中",

      type: "template",

      width: "100px",

      template: "selectChk"

    }

  ];

}

</script>

嗯，就这样

Vue+abp树形表格-LMLPHP

参考资料

ZkTable