ele table 行内双击出现input框修改

template部分

el-table 标签添加 @cell-dblclick="cellClick"[1]

<el-table height="350" :data="tableData" @cell-dblclick="cellClick">
...
  <el-table-column label="次数" prop="cs" align="center">
    <template slot-scope="scope">
      <span v-if="scope.$index === tabClickIndex && tabClickLabel === '次数'">
        <el-input clearable type="number" v-fo v-model.number="scope.row.cs" maxlength="300" placeholder="请输入次数" size="mini" @change="inputBlur" :style="{width: '50%'}" />
      </span>
      <span v-else>{{scope.row.cs }}</span>
    </template>
  </el-table-column>
  ...
</el-table>

script部分

methods: {
  //双击修改
  cellClick(row, column, cell, event) {
    if (column.property !== 'cs') return
    this.tabClickIndex = row.index
    this.tabClickLabel = column.label
  },
  // 失去焦点初始化
  inputBlur(event) {
  this.$refs.formTable.toggleRowSelection(this.jkData[this.tabClickIndex],event?true:false);
  this.tabClickIndex = null
  this.tabClickLabel = null
  }
}

main.js文件中添加v-fo自动聚焦方法

Vue.directive('fo', {
  inserted(el, binding, vnode) {
  // 聚焦元素
  el.querySelector('input').focus()
  }
})

---

1. 双击触发cellClick事件 ↩︎