vue树形表格

耗时三个星期，我做出来三张表，都做了些什么呢？这张表是任务列表这涉及到了element中的tree组件，以及引入跳转页面如何引入。还有填写某个表之后会有一栏状态动态变化等等。首先我们先来看第一个功能，树形表格。是...

北乎下周

5527人浏览 · 2021-11-01 10:32:52

北乎下周 · 2021-11-01 10:32:52 发布

如图是效果图，在名称一栏，一个主表，点开会有两个树形表。

下面两个树形表是怎么做出来的，那是后端的事情。

来看这个功能，树形表格。

树形表格首先是写在index.js中的一个公用方法

然后这个方法在main.js中进行导入（注：main.js是全局的入口文件）

import {isAuth, treeDataTranslate, transOrg,
 transUser, transDict, openImg, transDate, subtractDate} from '@/utils'


    <el-table
      :data="dataList"
      @selection-change="selectionChangeHandle"
      border
      style="width: 100%"
    >
      <el-table-column
        type="selection"
        :selectable="selectEnable"
        header-align="center"
        align="center"
        width="50"
      >
      </el-table-column>
      
      <table-tree-column
        prop="name"
        header-align="center"
        treeKey="id"
        parentKey="parentId"
        width="300"
        label="名称"
      >
      </table-tree-column>

您观察在名称这一栏中使用的标签是<table-tree-column></table-tree-column>

data部分

 data () {
    return {
      dataList: [],
      visible: false,
      visiblePopover: false,
   dataListSelections: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
    }
  },

js部分

  // 获取数据列表
    getDataList () {
      let that = this;
      this.$http({
        url: '/task/info/list',
        method: 'get',
        params: {
          'page': this.pageIndex,
          'limit': this.pageSize,
        }
      }).then(({ data }) => {
        if (data && data.code === 0) {
          // this.dataList = data.page.records
          that.dataList = that.treeDataTranslate(data.page, 'id', 'parentId', 'childrens')
        } else {
          this.dataList = []
          this.totalPage = 0
        }

      })
    },