element ui 表格双击单元格修改

最新推荐文章于 2024-02-20 13:59:40 发布

今夜大风

最新推荐文章于 2024-02-20 13:59:40 发布

阅读量274

点赞数

分类专栏： element UI

本文链接：https://blog.csdn.net/qq_38425904/article/details/120654173

版权

Vue.js 表格编辑数据绑定输入验证前端开发

关键词由CSDN通过智能技术生成

element UI 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<el-table
        :data="dqList"
        row-key="DQBM"
        v-loading="listLoading"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        style="width: 100%;"
        size="mini"
        @cell-dblclick="quiteEdit" 
        border>
      <el-table-column align="center" label="地区编码" width="150px">
        <template slot-scope="scope">
          {{ scope.row.DQBM }}
        </template>
      </el-table-column>
      <el-table-column align="center" width="180px" label="地区名称" >
        <template slot-scope="scope">
              <el-input ref="DQMC" 
                      v-model="scope.row.DQMC" 
                      v-if="scope.row.DQBM === tabClickIndex && tabClickLabel === '地区名称'" placeholder="地区名称" 
                      @blur="inputBlur(scope.row)">
              </el-input>
              <span v-else>{{ scope.row.DQMC }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" width="200px" label="备注" show-overflow-tooltip>
        <template slot-scope="scope">
              <el-input ref="BZ" 
                     v-model="scope.row.BZ" 
                     v-if="scope.row.DQBM === tabClickIndex && tabClickLabel === '备注'" placeholder="备注" 
                     @blur="inputBlur(scope.row)">
              </el-input>
              <span v-else>{{ scope.row.BZ }}</span>
        </template>
      </el-table-column>
    </el-table>

export default {
  data() {
    return {
      dqList:[],
      listLoading:true,
      tabClickIndex:null,
      tabClickLabel:'',
    }
  },
  methods: {
    quiteEdit(row, column, cell, event){
      switch (column.label) {
        case '地区名称':
          this.tabClickIndex = row.DQBM
          this.tabClickLabel = column.label
          break
        case '备注':
          this.tabClickIndex = row.DQBM
          this.tabClickLabel = column.label
          break
        default: return
      }
    },
    // 失去焦点初始化
    inputBlur(row) {
      this.tabClickIndex = null
      this.tabClickLabel = ''
      //这里还可以进行其他数据提交等操作
    }
  }
}