el-table显示树形数据报错

问题描述

el-table显示树形数据报错

Error: for nested data item, row-key is required
TypeError: this.$el.querySelectorAll is not a function

问题分析

后端返回的树形结构中没有返回id字段，所以需要手动遍历数据给数据添加id，el-table中默认设置row-key="id"

，没有id，又没有设置row-key的值这时就会报错。

问题解决

递归数据

recursive(data) {
      const setId = list => {
        list.forEach(item => {
          item.id = item.proid
          if (item.children) {
            setId(item.children)
          }
        })
      }
      setId(data)
},

el-table 树形结构复选框子项勾选问题

在使用element做表格开发使用复选框和树形结构时发现点击父元素复选框时，子元素无法选中，于是在table上监听点击和全选，根据数据有子节点来手动切换选中与否。

 // el-table 树形复选框需要的属性和方法
 @select="select"
 @select-all="selectAll"
 @selection-change="selectionChange"
 :tree-props="{children: 'children'}"
 
 // 为选中行添加特定有样式
 :row-class-name="rowClassName"

// el-table 封住方法

// 单选 this.childNm 就是 tree-props中的children
select(selection, row) {
      const checked = selection.some(el => {
        return row.id === el.id
      })
      if (this.childNm && row[this.childNm]) {
        this.recursive(row[this.childNm], checked)
      } else {
        row.isActive = checked
      }
    },

    /**
     * @Description: 递归渲染
     */
    recursive(data, checked) {
      const vm = this
      const toggleSel = list => {
        list.forEach(item => {
          item.isActive = checked
          vm.toggleSelection(item, checked)
          if (item[this.childNm]) {
            toggleSel(item[this.childNm])
          }
        })
      }
      toggleSel(data)
    },

    /**
     * @Description: 全选
     */
    selectAll(selection) {
      // tabledata第一层只要有在selection里面就是全选
      const isSelect = selection.some(el => {
        const tableDataIds = this.tableData.map(j => j.id)
        return tableDataIds.includes(el.id)
      })
      
      // tableDate第一层只要有不在selection里面就是全不选
      const isCancel = !this.tableData.every(el => {
        const selectIds = selection.map(j => j.id)
        return selectIds.includes(el.id)
      })
      
      if (isSelect) {
        this.recursive(selection, true)
      }
      
      if (isCancel) {
        this.recursive(this.tableData, false)
      }
    },

    /**
     * @Description: 切换选中状态
     */
    toggleSelection(row, select) {
      if (row) {
        this.$nextTick(() => {
          this.$refs.DeTable && this.$refs.DeTable.toggleRowSelection(row, select)
        })
      }
    },
    
	// 选中行后添加样式
	rowClassName({ row }) {
      if (row.isActive) {
        return 'mark-color'
      }
    },

// 调用封装的table组件返显数据
/**
     * @Description: 递归回显
     * @param {*} data
     * @param {*} selIds 返显需要的id集合
     * @return {*}
     */
    recursiveBack(data, selIds) {
      const tableRef = this.$refs.tableRef
      this.expandKeys = []
      const toggleSel = list => {
        list.forEach(item => {
          item.isActive = selIds.includes(item.id) // 返显标志
          tableRef && tableRef.toggleSelection(item, item.isActive) // 更新table数据
          this.expandKeys.push(item.id) // 展开
          if (item.children) {
            toggleSel(item.children)
          }
        })
      }
      toggleSel(data)
    },

备注

• row-key: 渲染树形数据时，必须要指定 row-key, row-key的值必须是唯一的，可以是String类型，也可以是function(row)

• indent: 展示树形数据时，树节点的缩进, Number类型

• tree-props: 渲染嵌套数据的配置选项。:tree-props="{children: 'children'}"定义子项的List名字，在data内写入，即可将子项写入在表格中

• select-on-indeterminate：在多选表格中，当仅有部分行被选中时，点击表头的多选框时的行为。若为 true，则选中所有行；若为 false，则取消选择所有行

• toggleRowSelection：用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

• clearSelection：用于多选表格，清空用户的选择