vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式

更新時間：2024年02月28日 09:57:10 作者：Lemon今天學(xué)習(xí)了嗎

這篇文章主要介紹了vue el-table字段點擊出現(xiàn)el-input輸入框,失焦保存方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、效果展示

當(dāng)沒有數(shù)據(jù)初始化展示如下：

有數(shù)據(jù)展示數(shù)據(jù)，點擊出現(xiàn)輸入框，失焦保存修改

二、代碼實現(xiàn)

<!-- @cell-click="cellClick" 當(dāng)前單擊的單元格 -->
<el-table
    ref="table"
    size="mini"
    height="100%"
    row-key="id"
    :data="tableData"
    :row-class-name="getRowClass"
    @cell-click="cellClick"
 >
 <el-table-column width="100" label="排序" show-overflow-tooltip>
  <template slot-scope="scope">
    <span
      v-if="
        scope.row.index === dbClickIndex &&
        dbClickLabel === '排序'
      "
    >
      <el-input
        ref="sortNumRef"
        v-model="sortNum"
        placeholder="請輸入"
        @blur="inputBlur(scope.row)"
        :pattern="numberPattern"
      />
    </span>
    <div v-else>
      <div class="flex_between cursor_pointer">
        <span
          :style="{ color: !scope.row.sortNum ? '#bbb' : '' }"
          >{{ scope.row.sortNum || '請輸入' }}</span
        >
        <i class="el-icon-edit" style="color: #1989fe"></i>
      </div>
    </div> 
  </template>
 </el-table-column>
</el-table>

 data() {
    return {
      sortNum: null,
      dbClickIndex: null, // 點擊的單元格
      dbClickLabel: '', // 當(dāng)前點擊的列名
      numberPattern: '[1-9]\\d*', // 正則表達(dá)式，限制只能輸入正整數(shù)
    }
 }
 
methods:{
 // 把每一行的索引放進(jìn)row
    getRowClass({ row, rowIndex }) {
      row.index = rowIndex
    },
  //  row 當(dāng)前行 column 當(dāng)前列
    cellClick(row, column, cell, event) {
      if (column.label === '排序') {
        this.dbClickIndex = row.index
        this.dbClickLabel = column.label
        this.sortNum = row.sortNum
        //聚焦input
        this.$nextTick(() => {
          this.$refs.sortNumRef.focus()
        })
      }
    },
    // 失去焦點初始化
    inputBlur(row, event, column) {
      this.editThemeIndex(row)
      this.dbClickIndex = null
      this.dbClickLabel = ''
      this.sortNum = null
    },
    // 編輯主題指標(biāo)列表-排序字段
    editThemeIndex(row) {
      if (this.sortNum === '' || this.sortNum === row.sortNum) return
      const params = {
        sortNum: Number(this.sortNum) || '',
        id: row.id
      }
      //接口請求
      xxxApi(params).then((res) => {
        if (res.code === 200) {
          this.$message.success('修改成功')
          this.refreshClick()
        }
      })
    },
    // 刷新
    refreshClick(val) {
      this.pages.pageIndex = 1
      this.initTable()
    }
  }