Vue怎么動態修改el-table的某列數據

這篇文章主要介紹“Vue怎么動態修改el-table的某列數據”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue怎么動態修改el-table的某列數據”文章能幫助大家解決問題。

動態修改el-table的某列數據

1.對話框打開時調用函數open@opened="checked"

2.可編輯 

<el-table-column
    --------

visEdit="true"
      >

3.同步選中的數據List：multipleSelection ，函數  checked: function () 

設置el-table某一列點擊出現輸入框可以編輯

設置el-table 某一列點擊出現輸入框可以編輯，鼠標失去輸入框焦點時輸入框消失，顯示對應的值。

如下圖所示：

具體實現：

<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780"  size="mini" @cell-click="tabClick">      
        <el-table-column label="順序" prop="adSort">
          <template slot-scope="scope">
            <span v-if="scope.row.index === tabClickIndex && tabClickLabel === '順序'">
              <el-input v-model="scope.row.adSort" type="number" maxlength="20" placeholder="請輸入順序" size="mini" @blur="inputBlur(scope.row)" />
            </span>
            <span v-else>{{ scope.row.adSort }}</span>
          </template>
        </el-table-column>
</el-table>

通過 tableRowClassName 設置每一行的index：

tableRowClassName ({ row, rowIndex }) {
      // 把每一行的索引放進row
      row.index = rowIndex
}

行點擊事件，當某一行被點擊時，該行的某列設置 tabClickIndex：

由于

v-if="scope.row.index === tabClickIndex && tabClickLabel === '順序'"

所以當前點擊行的某列會出現輸入框：

// tabClick row 當前行 column 當前列
tabClick (row, column, cell, event) {
      switch (column.label) {
        case '順序':
          this.tabClickIndex = row.index
          this.tabClickLabel = column.label
          break
        default: return
      }
      console.log('tabClick', this.tabClickIndex, row.adName, row.adSort)
}

鼠標失焦事件：

// 失去焦點初始化
inputBlur (row) {
      // console.log('row', row)
      this.tabClickIndex = null
      this.tabClickLabel = ''     
}

關于“Vue怎么動態修改el-table的某列數據”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。