专栏首页小神仙Vue+abp树形表格

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>

嗯,就这样

参考资料

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • vue学习笔记4

    考虑一个问题:想要实现 名 和 姓 两个文本框的内容改变,则全名的文本框中的值也跟着改变;(用以前的知识如何实现???)

    用户6362579
  • 单元测试mock当前时间

    在实际项目中很多地方用到DateTime.Now,这个时间是时时变化的。如果要进行单元测试对比预期结果时,这个时间无法预测,可以添加如下两个时间类

    用户6362579
  • css笔记

    从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成...

    用户6362579
  • 父组件从vuex获取数据给子组件传值延迟问题

    做项目的时候发现如果子组件在页面比较靠上,子组件渲染的时候父组件还未取到值,导致子组件取不到数据

    tianyawhl
  • 成为优秀Swift开发者的10条建议

    在这里给大家分享一些帮助大家成为更优秀的Swift开发者的建议,让你的代码,写的更少,性能更优 。

    哲洛不闹
  • 127个常用的JS代码片段,每段代码花30秒就能看懂(四)

    用于判断参数的值是否是对象,这里运用了Object 构造函数创建一个对象包装器,如果是对象类型,将会原值返回。

    前端达人
  • Salt-API安装配置及使用

    程序员同行者
  • 笔记——四大组件(十五)

    1、Activity是一种展示型组件。Activity的启动由Intent触发,其中Intent可以分为显式Intent和隐式Intent,显式Intent可以...

    紫兮木溪
  • 小程序本地存储之循环写入数组内容

    以Sync(同步,同时)结尾的都是都是同步缓存,二者的区别是,异步不会阻塞当前任务,同步缓存直到同步方法处理完才能继续往下执行。

    许坏
  • 一文读懂监督学习、无监督学习、半监督学习、强化学习这四种深度学习方式

    一般说来,训练深度学习网络的方式主要有四种:监督、无监督、半监督和强化学习。在接下来的文章中,计算机视觉战队将逐个解释这些方法背后所蕴含的理论知识。除此之外,计...

    计算机视觉研究院

扫码关注云+社区

领取腾讯云代金券