el-table表格点击单元格实现编辑

  1. 使用 el-tableel-table-column 创建表格。
  2. 在单元格的默认插槽中,使用 div 显示文本内容,单击时触发编辑功能。
  3. 使用 el-input 组件在单元格中显示编辑框。
  4. data() 方法中定义了 tableData,tabClickIndex: null,tabClickLabel: '',用于判断是否处于编辑转态
  5. @cell-click="tabClick" 方法用于将单元格设置为编辑状态,并使用 this.$nextTick 来确保输入框能获得焦点。
  6. 通过blur监听失去焦点。
javascript 复制代码
<template>
  <div>
    <el-table :data="dataDetail" :row-class-name="tableRowClassName" border style="width: 100%" max-height="500px" @cell-click="tabClick">
      <el-table-column prop="test1" label="test1" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === 'test1'">
            <el-input :ref="'test1'+scope.row.id" v-model="scope.row.test1" maxlength="300" placeholder="请输入test1" size="mini" @blur="inputBlur" />
          </span>
          <span v-else>{
  
  { scope.row.test1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="test2" label="test2" width="120px" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === 'test2'">
            <el-input :ref="'test2'+scope.row.id" v-model="scope.row.test2" :blur="inputBlur" placeholder="请输入test2" size="mini" @blur="inputBlur" />
          </span>
          <span v-else>{
  
  { scope.row.test2 | fmoney }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="test3" label="test3" align="center" width="180">
        <template slot-scope="scope">
          <span v-if="scope.row.index === tabClickIndex && tabClickLabel === 'test3'">
            <el-input :ref="'test3'+scope.row.id" v-model="scope.row.test3" maxlength="300" placeholder="请输入test3" size="mini" @blur="inputBlur" />
          </span>
          <span v-else>{
  
  { scope.row.test3 }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  data () {
    return {
      tabClickIndex: null, // 点击的单元格
      tabClickLabel: '', // 当前点击的列名
      dataDetail: [{ id: '123', test1: 'sss' }, { id: '456', test1: 'sss' }]
    }
  },
  methods: {
    tableRowClassName ({ row, rowIndex }) {
  
      row.index = rowIndex
    },
   
    tabClick (row, column, cell, event) {
      switch (column.label) {
        case 'test1':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case 'test2':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        case 'test3':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      const key = this.tabClickLabel + row.id
      this.$nextTick(() => {
        this.$refs[key].focus()
      })
    },
  
    inputBlur (row, event, column) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
    },
  }
}
</script>

<style>
</style>
相关推荐
jojo是只猫26 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程9 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
军军君0111 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具四:后端项目基础框架搭建下
spring boot·spring·面试·elementui·typescript·uni-app·mybatis
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript