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

最新推荐文章于 2022-11-24 14:32:39 发布

原创

最新推荐文章于 2022-11-24 14:32:39 发布 · 2.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue #tablet #treeview

本文介绍了如何在 Vue 项目中利用 iView 的 Table 组件实现异步加载数据的表格树结构。示例代码展示了如何设置表格列、数据加载方法以及操作列的渲染，包括点击事件处理。在 `mounted` 生命周期钩子中调用 `loadData` 函数初始化数据，`handleLoadData` 方法用于异步加载子数据。同时，提供了表格行点击事件的处理方式。

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: "#121