element ui 点击单元格切换为输入框并且自动获取焦点

最新推荐文章于 2024-05-16 02:48:09 发布

叮叮车576

最新推荐文章于 2024-05-16 02:48:09 发布

阅读量1.9k

点赞数

文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_59081597/article/details/125150819

版权

html

    <el-table
      ref="table"
      :data="aqjyData"
      border
      style="width: 100%"
      max-height="500"
      @cell-click="rowstatus"
    >
      <el-table-column
        label="序号"
        width="150"
        type="index"
      />
      <el-table-column
        label="建议"
        width="auto"
      >
        <template slot-scope="scope">
          <span
            v-if="!scope.row.suggestFlag "
          >
            {{ scope.row.suggest }}
          </span>
          <el-input
            v-if="scope.row.suggestFlag "
            ref="input"
            v-model="scope.row.suggest"
            placeholder="请输入内容"
            @blur="blur(scope.row,scope.column)"
          />
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="120"
      >
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click.native.prevent="deleteRow(scope.$index, aqjyData)"
          >
            移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

methods:{
    // 点击单元格切换单元格状态为输入框
   rowstatus(row, column, cell, event) {
      if (column.label === '建议') {
        row.suggestFlag = true
    //重新获取输入框的焦点
        this.$nextTick(() => {
          this.$refs.input.focus()
        })
      }
    },
    // 输入框失焦事件
    blur(row, column) {
    // 失焦时改变输入框的状态为表格
      if (column.label === '建议') {
        row.suggestFlag = false
      }
    },
}