项目中需要用到树形表格，其他同学找了一个ZkTable，我也就跟着用了，不太好用，有更好的记得联系我。先说下缺点，如果这些不能满足你，后面也没必要看了。 缺点如下（也可能我不会用，如果你会一定记得告诉我）：
- 第一列不能使用模板数据，必须是简单的属性字段，也就不能使用自定义html标签了，如果你用了，不好意思，整个数据显示不出来
- 单选没有高亮（根本没有单选？），反正我用的多选框代替单选
- 模板使用的插槽而不是render函数，模板复选框绑定的数据只能单向绑定，即在界面点选可以修改属性值，但是修改属性值不会更新页面选中状态
- 没有分页
- 绑定数据不能直接使用属性套vuex中的数据，更新了数据不会刷新页面
使用方法
首先安装插件
代码语言：javascript复制yarn add vue-table-with-tree-grid在页面中引用
代码语言：javascript复制<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
