VUE 使用 IView 实现Table Tree进行异步数据加载

4 篇文章 0 订阅
1 篇文章 0 订阅
本文介绍了如何在 Vue 项目中利用 iView 的 Table 组件实现异步加载数据的表格树结构。示例代码展示了如何设置表格列、数据加载方法以及操作列的渲染,包括点击事件处理。在 `mounted` 生命周期钩子中调用 `loadData` 函数初始化数据,`handleLoadData` 方法用于异步加载子数据。同时,提供了表格行点击事件的处理方式。
摘要由CSDN通过智能技术生成

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>

 

treegrid插件 当前选中的行: var config = { id: "tg1", width: "800", renderTo: "div1", headerAlign: "left", headerHeight: "30", dataAlign: "left", indentation: "20", folderOpenIcon: "images/folderOpen.gif", folderCloseIcon: "images/folderClose.gif", defaultLeafIcon: "images/defaultLeaf.gif", hoverRowBackground: "false", folderColumnIndex: "1", itemClick: "itemClickEvent", columns:[ {headerText: "", headerAlign: "center", dataAlign: "center", width: "20", handler: "customCheckBox"}, {headerText: "名称", dataField: "name", headerAlign: "center", handler: "customOrgName"}, {headerText: "拼音码", dataField: "code", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "负责人", dataField: "assignee", headerAlign: "center", dataAlign: "center", width: "100"}, {headerText: "查看", headerAlign: "center", dataAlign: "center", width: "50", handler: "customLook"} ], data:[ {name: "城区分公司", code: "CQ", assignee: "", children:[ {name: "城区卡品分销中心"}, {name: "先锋服务厅", children:[ {name: "chlid1"}, {name: "chlid2"}, {name: "chlid3", children: [ {name: "chlid3-1"}, {name: "chlid3-2"}, {name: "chlid3-3"}, {name: "chlid3-4"} ]} ]}, {name: "半环服务厅"} ]}, {name: "清新分公司", code: "QX", assignee: "", children:[]}, {name: "英德分公司", code: "YD", assignee: "", children:[]}, {name: "佛冈分公司", code: "FG", assignee: "", children:[]} ] }; /* 单击数据行后触发该事件 id:行的id index:行的索引。 data:json格式的行数据对象。 */ function itemClickEvent(id, index, data){ window.location.href="ads"; } /* 通过指定的方法来自定义栏数据 */ function customCheckBox(row, col){ return ""; } function customOrgName(row, col){ var name = row[col.dataField] || ""; return name; } function customLook(row, col){ return "查看"; } //创建一个组件对象 var treeGrid = new TreeGrid(config); treeGrid.show(); /* 展开、关闭所有节点。 isOpen=Y表示展开,isOpen=N表示关闭 */ function expandAll(isOpen){ treeGrid.expandAll(isOpen); } /* 取得当前选中的行,方法返回TreeGridItem对象 */ function selectedItem(){ var treeGridItem = treeGrid.getSelectedItem(); if(treeGridItem!=null){ //获取数据行属性值 //alert(treeGridItem.id + ", " + treeGridItem.index + ", " + treeGridItem.data.name); //获取父数据行 var parent = treeGridItem.getParent(); if(parent!=null){ //jQuery("#currentRow").val(parent.data.name); } //获取子数据行集 var children = treeGridItem.getChildren(); if(children!=null && children.length>0){ jQuery("#currentRow").val(children[0].data.name); } } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值