el-table行编辑

需求:单点行编辑并且请求接口更新数据,表格中某几个字段是下拉框取值的,剩下的是文本域;展示的时候 需要区分下拉框编码还是中文

故障模式这个展示的是fault_mode编码,但要显示的文字fault_mode_chn 这点需要注意

el-table行编辑_第1张图片

        
          
          
            
          
          
          
            
            
          
          
        

    tabClick(row, column, cell, event) {
      if (this.viewColumns.some((ele) => ele.label == column.label)) {
        this.tabClickIndex = row.index
      }
      if (column.label == 'MQS' || column.label == '重要项目') {
        this.tabClickLabel = '2'
      } else if (column.label == '故障模式') {
        this.tabClickLabel = '4'
      } else {
        this.tabClickLabel = '1'
      }
      this.tabLabel = column.label
    },
    tableRowClassName({ row, rowIndex }) {
      // 把每一行的索引放进row
      row.index = rowIndex
    },
    intFormatter(data, item) {
      // 重要项、mqs项和故障模式三个是下拉框
      if (item == 'fault_mode') {
        const text = this.faultModeOptions.filter(item => item.id === data)[0]?.text
        return text || ''
      } else {
        return data
      }
    },
    handleChange(val, row) {
      row.fault_mode_chn = this.faultModeOptions.filter(item => item.id === row.fault_mode)[0]?.text
      updItem(row).then(res => {
        if (res.result == '1') {
          this.$message.success('修改管理项成功')
          this.tabClickIndex = ''
          this.tabClickLabel = ''
        }
      })
    }

 关于行编辑,可以参考elementui官网提供的方法

你可能感兴趣的:(elementui,vue.js,elementui,javascript)