Vue+abp树形表格

Posted missile

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue+abp树形表格相关的知识,希望对你有一定的参考价值。


项目中需要用到树形表格,其他同学找了一个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>

嗯,就这样
技术图片


参考资料

以上是关于Vue+abp树形表格的主要内容,如果未能解决你的问题,请参考以下文章

vue 2.0 + ElementUI构建树形表格

ElementUI实现表格加载树形数据教程

VUE项目实战39商品分类树形表格渲染和分页

VUE项目实战38实现商品分类的树形表格

vue-table-with-tree-grid的树形表格组件如何使用

vue树形table