表格中隐藏的input输入框聚焦

^O^ ^O^

已于 2023-12-06 09:45:55 修改

阅读量1.7k

点赞数 1

分类专栏：笔记文章标签： javascript 前端 vue.js

于 2021-03-05 18:05:52 首次发布

本文链接：https://blog.csdn.net/weixin_46447120/article/details/114406694

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表格中嵌入可显示隐藏的输入框，且显示的时候能自动聚焦

思路说明：

把数据源每一项添加两个字段 number 和 type。number 可以用来判断是哪条数据；type 默认为Y (
默认展示文案，隐藏输入框）。点击文案将type赋值为N展示输入框，用$refs()方法
获取dom元素进行聚焦。

this.tableData.forEach((item, index) => {
   item.number = index
   item.type = 'Y'
})

html：

<el-table
  style="width: 100%" 
  :data="tableData"
>
  <el-table-column v-for="(item, index) in columns" :key="item.prop+index" :prop="item.prop" :label="item.label" :min-width="item.width">
    <template slot-scope="scope">
      <span v-if="item.prop === 'Status'">{{ numFormatFilter(scope.row[item.prop]) }}</span>
      <span v-else-if="item.prop === 'priority'">
      	<!-- 点击文案按钮展示输入框 -->
        <span  v-if="scope.row.type == 'Y'">{{scope.row[item.prop]}}
          <el-button
            icon="el-icon-edit"
            size="mini"
            class="table-inner-btn change_btn"
            @click="editClick(scope.row)"
          ></el-button>
        </span>
        <span v-else>
          <input
            v-model="changeText"
            type="text" class="change_input"
            @blur="inputBlur(scope.row)"
            ref="number"
            @input="changeInput"
            maxlength="2"
          >
        </span>
      </span>
      <span v-else>{{ scope.row[item.prop] || '--'}}</span>
    </template>
  </el-table-column>
</el-table>

js：

data() {
  return {
    columns: [
      { label: "", prop: "", width: '20' },
      { label: "", prop: "", width: '20' },
      { label: "优先级", prop: "priority", width: '20' },
      { label: "状态", prop: "Status", width: '20' },
      { label: "", prop: "", width: '20' },
      { label: "", prop: "", width: '20' },
      { label: "", prop: "", width: '20' },
      { label: "", prop: "", width: '20' }
    ],
    tableData: [{}, {}],
    changeText: ''
  }
},
methods: {
	// 修改按钮点击
    editClick (row) {
      this.changeText = ''
      row.type = 'N'
      this.$set(this.tableData, row.number, row)
      
      this.$nextTick(() => {
        this.$refs['number'][0].focus()
        this.changeText = row.priority
      })
    },
    // 修改失焦事件
    inputBlur (row) {
      row.type = 'Y'
      this.$set(this.tableData, row.number, row)
      // ...处理
    },
    inputChange () {
      // ...处理
    },
}