Element-UI树形结构表格的操作

<el-table :data="tableData" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}"
        style="width: 100%; margin: 15px 0" row-key="id" default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="name" label="字段名" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="xcode" label="字段下标" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-tooltip effect="dark" content="添加字段" :enterable="false" placement="top">
              <el-button class="icon-button" type="text" icon="el-icon-circle-plus-outline"
                @click.native.prevent="addHandle(scope.row, scope.$index)">
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

data () {
    return {
        tableData: [
        {
          id: 1,
          name: '字段0'
        }, {
          id: 2,
          name: '字段1'
        }, {
          id: 3,
          name: '字段2',
          children: [{
            id: 31,
            name: '字段2-0'
          }, {
            id: 32,
            name: '字段2-1'
          }]
        }, {
          id: 4,
          name: '字段3'
        }
      ]
    }
  },
  mounted () {
    this.treeTableXcode(this.tableData)
    console.log(this.tableData)
  },
  methods: {
    treeTableXcode (data, xcode) {
    let that = this
    xcode = xcode || ""
      for (var i = 0; i < data.length; i++) {
        var item = data[i]
        item.xcode = xcode + i
        if (item.children && item.children.length > 0) {
          that.treeTableXcode(item.children, item.xcode + "-")
        }
      }
    }
  }

需要对树形表格某一行进行操作的话，我们可以自己生成一个 xcode 利用它去找对应的上下级关联关系，拿到对应的数据做处理