vue element-ui table fixed 导致 input 不能 focus?

Question

直接上 复现代码

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column
      prop="name"
      label="姓名"
      width="180"
      fixed
    >
      <template slot-scope="scope">
        <el-input
          v-if="scope.row.nameEditing"
          :ref="scope.row.name"
          v-model="scope.row.name"
          size="mini"
          placeholder="请输入内容"
        />
        <template v-else>
          <span>{{ scope.row.name }}</span>
          <i style="cursor:pointer;margin-left:5px" class="el-icon-edit-outline" @click="editName(scope.row)" />
        </template>
      </template>
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址"
    />
    <!-- 这样就不能 focus -->
    <!-- <el-table-column
      prop="address"
      label="地址"
      fixed="right"
    /> -->
  </el-table>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      tableData: []
    }
  },
  mounted() {
    this.tableData = [{
      date: '2016-05-02',
      name: '王小虎1',
      address: '上海市普陀区金沙江路 1518 弄'
    }, {
      date: '2016-05-04',
      name: '王小虎2',
      address: '上海市普陀区金沙江路 1517 弄'
    }, {
      date: '2016-05-01',
      name: '王小虎3',
      address: '上海市普陀区金沙江路 1519 弄'
    }, {
      date: '2016-05-03',
      name: '王小虎4',
      address: '上海市普陀区金沙江路 1516 弄'
    }]
  },
  methods: {
    editName(row) {
      this.$set(row, 'nameEditing', true)
      this.$nextTick(() => {
        this.$refs[row.name].focus()
      })
    }
  }
}
</script>

请问为什么 我加了 fixed 就不行了呢?

Answer 1

组件实现fixed原理就是在原来的表格上面覆盖一个相同的列来实现的固定的，所以this.$refs[row.name]应该不是唯一了，应该有多个