循环中使用ref绑定dom对象其中的坑

view中
组件el-cascader中，我们的handleChange方法中操作了dom，注意这里绑定的ref节点一定是动态的，否则this.$refs['cascader']选中的永远都是第一行的el-cascader的dom

动态节点我们可以利用索引区分

:ref="`cascader${$index}`"

<el-form :model="form" ref="form">
        <el-table :data="form.list" border stripe>
          <el-table-column
            show-overflow-tooltip
            header-align="center"
            align="center"
            label="所属单位/部门"
          >
            <template slot-scope="{ row, $index }">
              <el-form-item
                :prop="`list.${$index}.staffDeptId`"
                :rules="dataRule.staffDeptId"
              >
                <el-cascader
                  filterable
                  :ref="`cascader${$index}`"
                  v-model="row.staffDeptId"
                  :options="assetOptions"
                  @change="(e) => handleChange(e, $index)"
                  :show-all-levels="false"
                  :props="{
                    expandTrigger: 'hover',
                    emitPath: false,
                    value: 'id',
                    label: 'name',
                    checkStrictly: true,
                  }"
                  placeholder="请选择所属单位/部门"
                ></el-cascader>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
    </el-form>

数据源中

     form: {
        list: [{ staffDeptId: "" }],
      },

method中

handleChange(e, index) {
      this.$nextTick(() => {
        // 这里我们获取dom元素的时候，ref绑定的结构是cascader + index的组合
        // 目的就是点击不同行的时候，保证每一行的级联组件元素的唯一性
        let [node] = this.$refs[`cascader${index}`].getCheckedNodes();
        this.form.people[index].deptName = node.label;
      });
    },