VUE 使用 IView 实现Table Tree进行异步数据加载
页面布局
<Table ref="thisTab"
row-key="ID"
:load-data="handleLoadData"
:columns="columnsList"
:data="familyList"
:highlight-row="true"
:disabled-hover="false"
:height="tableHeight"
@on-current-change="onRowClick"
></Table>
数据加载及方法
export default {
data() {
return {
columnsList: [
{ title: "结构",key: "Name",width: '180',width: 220,tree: true },
{ title: "名称", key: "FileName", width: '180', align: "center",
render: (h, params) => {
return h("div", [
h( "span", { style: { color: "#121111" } }, params.row.FileName || '--')
]);
}
},
{ title: "状态", key: "Status", align: "center",
render: (h, params) => {
var empty = h("span",{style: {color: "#121111"}},"--");
if (params.row._loading !== undefined) {
return h("div", [empty]);
} else if (params.row.Status == 1) {
return h("div", [h("span",{style: {color: "#f90"}},"状态1")]);
} else if (params.row.Status == 2) {
return h("div", [h("span",{style: {color: "#008000"}},"状态2")]);
} else {
return h("div", [empty]);
}
}
},
{ title: "分类", key: "", width: 180, align: "center",
render: (h, params) => {
var str ="";
params.row.TypeList.forEach(function(item,i){
str += str.length > 0 ? "、" + "[" + item.Name + "]" :"[" + item.Name + "]";
})
var tagItem = h(
"span",
{style: {color: "#121111"},
domProps: {title: str}
},
str.length > 20 ? str.substring(0,20) + "..." : str || '--'
)
var arrys =[];
arrys.push(tagItem);
return h("div", arrys);
}
},
{
title: "操作",
align: "center",
render: (h, params) => {
var row = params.row;
var del = h("span",
{
class:"iconfont icon-delete",
domProps: {title: '删除'},
style: {marginRight: "10px",float: "right",cursor: 'pointer'},
on: {
click: () => {this.btnClickEvent(params.row, {name: "Del"});
}
}
},"");
var arrys =[];
arrys.push(del);
return h("div", arrys);
}
}
],
familyList: [],
currentRow: []
};
},
mounted() {
this.loadData();
},
methods: {
onRowClick(currentRow,oldCurrentRow){
this.currentRow = currentRow;
},
loadData(item, callback) {
var _this = this;
var _item = item;
var pid = "";
if (_item) {
pid = _item.ID;
}
post("/api/GetList", {
PID: pid,
}).then(res => {
if (res.Code == 0) {
var list = res.Datas;
list.forEach(function(obj, indxs) {
if (obj.ChildCont > 0) {
obj._loading = false;
}
});
if (callback !== undefined) {
callback(list);
}
if(_this.familyList.length == 0){
_this.familyList = list;
}
}
});
},
handleLoadData(item, callback) {
this.loadData(item, function(data) {
callback(data);
});
this.$forceUpdate();
},
btnClickEvent(row, render) {
//table操作列相应方法
var _this = this;
switch (render.name) {
case "Edit":
break;
case "Del":
this.$Modal.confirm({
title: "警告",
content: "当前数据删除后不可恢复,确认要删除当前数据",
okText: "确认",
cancelText: "取消",
onOk: async () => {
}
});
break;
}
},
}
};
</script>