快捷導(dǎo)航

Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能實(shí)例

更新時間：2023年07月24日 11:22:46 作者：lovoo

這篇文章主要給大家介紹了關(guān)于Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能的相關(guān)資料,element-UI表格的使用相信大家都不陌生,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下

說明：

在進(jìn)行采購入庫的過程中，有必要對表格中的一行進(jìn)行快速編輯保存，節(jié)省時間，提高工作效率！，而不是每次編輯都要彈窗才可編輯源碼：https://gitee.com/charlinchenlin/store-pos

效果圖：

1、在data定義supplier數(shù)組等元素

data() {
      return {       
        suppliers:[],   //保存供應(yīng)商數(shù)據(jù)    
        showInput: "", //用來判斷是否顯示哪個單元格
        oldData: {}, //用來存修改前的數(shù)據(jù)
        currentData: {},  //用來保存新的數(shù)據(jù)     
      }
    },

2、為el-table表格單擊和雙擊添加tableDbEdit事件

<el-table :data="dataList" size="mini" v-loading="dataListLoading" @selection-change="selectionChangeHandle"
      style="width: 100%;" @cell-click="tableDbEdit" @cell-dblclick="tableDbEdit" height="320"
      :header-cell-style="{ background: '#fcfcfc', color: '#606266', height:'36px'}">
      <el-table-column type="selection" header-align="center" align="center" width="50">
      </el-table-column>
        ------
    </el-table>

控制是否顯示select下拉框

tableDbEdit(row, column, event) {
   this.showInput = column.property + row.inboundId;
   this.oldData[column.property] = row[column.property];
 },

3、為供應(yīng)商列添加下拉框

如果showInput的值與當(dāng)前的inboundId相同，則顯示下拉選項(xiàng)，否則顯示數(shù)據(jù)信息

<el-table-column prop="supplierName" header-align="center" align="center" label="供應(yīng)商名稱" width="150" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-select size="mini" @focus="getSuppliers()" @click="getSuppliers()" @change='blurInput(scope.row, "supplierName", scope.row.supplierName)' v-model="scope.row.supplierName" clearable
            v-if="showInput == `supplierName${scope.row.inboundId}`"
            placeholder="請選擇">
            <el-option v-for="item in suppliers" :key="item.supplierId" :label="item.supplierName" :value="item.supplierName">
            </el-option>
          </el-select>
          <span v-else class="active-input">{{scope.row.supplierName}}</span>
        </template>
</el-table-column>

聚焦或單擊時獲取供應(yīng)商數(shù)據(jù)

async getSuppliers() {
        const res = await this.$http({
          url: `/product/supplier/getSupplies`,
          method: 'get',
          params: this.$http.adornParams()
        })
        let data = res.data
        if (data && data.code === 0) {
          this.suppliers = data.data
        }
      },

觸發(fā)change事件時給當(dāng)前列賦值，并設(shè)置供應(yīng)商信息

// 當(dāng)input失去光標(biāo)后進(jìn)行的操作
      async blurInput(row, name, value) {
        // 判斷數(shù)據(jù)是否有所改變，如果數(shù)據(jù)有改變則調(diào)用修改接口
        if (this.oldData[name] != value) {
          row[name] = value         
        }
        this.showInput = ""
        this.currentData = row
        if(name === 'supplierName'){
          this.setSuppliers(row)
        }
      },
	setSuppliers(row) {
        for (let index in this.suppliers) {
          let item = this.suppliers[index]
          if (row.supplierName === item.supplierName) {
              row.supplierId = item.supplierId
              return
          }
        }
      },

4、保存當(dāng)前列，成功后重新加載數(shù)據(jù)

async saveHandle(row) {
        console.log("saveHandle row===", row)
        row.status = row.status ? 1 : 0
        const res = await this.$http({
          url: `/purchase/purchasesinboundorder/update`,
          method: 'post',
          data: this.$http.adornData(row)
        });
        let data = res.data
        if (data && data.code !== 0) {
          row.status = !row.status;
          return this.$message.error('修改失敗!');
        }
        this.$message.success('更新成功！');
        this.getDataList();
      },

5、定義v-focus

directives: {
      // 通過自定義指令實(shí)現(xiàn)的表單自動獲得光標(biāo)的操作
      focus: {
        inserted: function(el) {
          if (el.tagName.toLocaleLowerCase() == "input") {
            el.focus()
          } else {
            if (el.getElementsByTagName("input")) {
              el.getElementsByTagName("input")[0].focus()
            }
          }
          el.focus()
        }
      },
      focusTextarea: {
        inserted: function(el) {
          if (el.tagName.toLocaleLowerCase() == "textarea") {
            el.focus()
          } else {
            if (el.getElementsByTagName("textarea")) {
              el.getElementsByTagName("textarea")[0].focus()
            }
          }
          el.focus()
        }
      }
    },

總結(jié)

到此這篇關(guān)于Vue+EleMentUI實(shí)現(xiàn)el-table-colum表格select下拉框可編輯功能的文章就介紹到這了,更多相關(guān)el-table-colum表格select下拉框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: