Vue+abp树形表格

Posted 2020-11-23 missile

---

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

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

嗯，就这样

---

参考资料

• ZkTable