<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利用它去找對應的上下級關聯關係，拿到對應的資料做處理