Vue+EleMentUI实现el-table-colum表格select下拉框可编辑

Posted 2023-03-15 lovoo

说明：

在进行采购入库的过程中，有必要对表格中的一行进行快速编辑保存，节省时间，提高工作效率！，而不是每次编辑都要弹窗才可编辑

效果图：

1、在data定义supplier数组等元素

data() 
      return        
        suppliers:[],   //保存供应商数据    
        showInput: "", //用来判断是否显示哪个单元格
        oldData: , //用来存修改前的数据
        currentData: ,  //用来保存新的数据     
      
    ,

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、为供应商列添加下拉框

如果showInput的值与当前的inboundId相同，则显示下拉选项，否则显示数据信息

<el-table-column prop="supplierName" header-align="center" align="center" label="供应商名称" 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>

聚焦或单击时获取供应商数据

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
        
      ,

触发change事件时给当前列赋值，并设置供应商信息

// 当input失去光标后进行的操作
      async blurInput(row, name, value) 
        // 判断数据是否有所改变，如果数据有改变则调用修改接口
        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、保存当前列，成功后重新加载数据

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: 
      // 通过自定义指令实现的表单自动获得光标的操作
      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()
        
      
    ,