日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后,達者為師

網站首頁 編程語言 正文

element ui 表格雙擊單元格修改

作者:今夜大風 更新時間: 2022-01-13 編程語言

在這里插入圖片描述

<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 = ''
      //這里還可以進行其他數據提交等操作
    }
  }
}

以上是具體代碼,具體可以根據自己的項目情況進行調整修改

原文鏈接:https://blog.csdn.net/qq_38425904/article/details/120654173

欄目分類
最近更新