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

Z时代
2024-02-26
分类：IT

直接上复现代码

<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>