快捷導(dǎo)航

Vue如何動(dòng)態(tài)修改el-table的某列數(shù)據(jù)

更新時(shí)間：2022年04月23日 16:52:38 作者：guohongyanghy

這篇文章主要介紹了Vue如何動(dòng)態(tài)修改el-table的某列數(shù)據(jù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

動(dòng)態(tài)修改el-table的某列數(shù)據(jù)

1.對(duì)話框打開(kāi)時(shí)調(diào)用函數(shù)open@opened="checked"

2.可編輯

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

visEdit="true"
??????>

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

設(shè)置el-table某一列點(diǎn)擊出現(xiàn)輸入框可以編輯

設(shè)置el-table 某一列點(diǎn)擊出現(xiàn)輸入框可以編輯，鼠標(biāo)失去輸入框焦點(diǎn)時(shí)輸入框消失，顯示對(duì)應(yīng)的值。

如下圖所示：

具體實(shí)現(xiàn)：

<el-table :data="tableData" v-loading="loading" :row-class-name="tableRowClassName" border max-height="780" style="width: 100%" 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="請(qǐng)輸入順序" size="mini" @blur="inputBlur(scope.row)" />
            </span>
            <span v-else>{{ scope.row.adSort }}</span>
          </template>
        </el-table-column>
</el-table>

通過(guò) tableRowClassName 設(shè)置每一行的index：

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

行點(diǎn)擊事件，當(dāng)某一行被點(diǎn)擊時(shí)，該行的某列設(shè)置 tabClickIndex：

由于

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

所以當(dāng)前點(diǎn)擊行的某列會(huì)出現(xiàn)輸入框：

// tabClick row 當(dāng)前行 column 當(dāng)前列
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)
}

鼠標(biāo)失焦事件：

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

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue中預(yù)覽zip的實(shí)現(xiàn)示例
打包壓縮成zip的東西,再解壓,很麻煩,本文主要介紹了vue中預(yù)覽zip的實(shí)現(xiàn)示例,具有一定的參考價(jià)值,感興趣的可以了解一下
2023-09-09
vue權(quán)限問(wèn)題的完美解決方案
今天來(lái)說(shuō)說(shuō)權(quán)限管理，因?yàn)榫W(wǎng)上已經(jīng)有很多關(guān)于這方面的很多內(nèi)容，下面這篇文章主要給大家介紹了關(guān)于vue權(quán)限問(wèn)題的完美解決方案，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
vue3?v-bind="$attrs"繼承組件全部屬性的解決方案
這篇文章主要介紹了vue3?v-bind=“$attrs“?繼承組件全部屬性的解決方案,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-06-06
vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況
這篇文章主要給大家介紹了關(guān)于vue3+ts+vite使用el-table表格渲染記錄重復(fù)情況的相關(guān)資料,我們可以通過(guò)合并渲染、數(shù)據(jù)緩存或虛擬化等技術(shù)來(lái)減少重復(fù)渲染的次數(shù),文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
詳解vue-cli中使用rem,vue自適應(yīng)
這篇文章主要介紹了vue-cli使用rem,vue自適應(yīng)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-05-05
Vue.js進(jìn)行查詢操作的實(shí)例詳解
這篇文章主要介紹了Vue.js進(jìn)行查詢操作的實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下
2017-08-08
Vue實(shí)例掛載的全流程詳解
理解?Vue?實(shí)例的掛載過(guò)程,不僅有助于我們更好地掌握?Vue?的核心原理,還能提高我們?cè)陂_(kāi)發(fā)中的調(diào)試和優(yōu)化能力,下面就跟隨小編一起學(xué)習(xí)一下吧
2024-12-12
最新Vue過(guò)濾器介紹及使用方法
過(guò)濾器是vue為開(kāi)發(fā)者提供的功能，常用于文本的格式化，過(guò)濾器應(yīng)該被添加在JavaScrip表達(dá)式的尾部，由“管道符”進(jìn)行調(diào)用，這篇文章通過(guò)案例給大家講解Vue過(guò)濾器介紹及使用方法，需要的朋友參考下吧
2022-11-11
深入詳解Vue3中的Mock數(shù)據(jù)模擬
這篇文章主要為大家介紹了深入Vue3中的Mock數(shù)據(jù)模擬實(shí)現(xiàn)細(xì)節(jié)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-05-05
Vue項(xiàng)目中在父組件中直接調(diào)用子組件的方法
這篇文章主要給大家介紹了Vue項(xiàng)目中如何在父組件中直接調(diào)用子組件的方法,文章通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2023-11-11