ele 表格编辑 表单 修改

1、

<el-table :data="tableData" @cell-mouse-enter="cellClick"
			:cell-class-name="getRowColumn">
	<el-table-column prop="note" align="center" label="列1" >
		<template  slot-scope="scope">
			<el-input @change="rowSubmitForm(scope.row)" v-if="scope.row.index==clickCellRowIndex && scope.column.index==clickCellColumnIndex" size="small" v-model="scope.row.note" @blur="inputBlur" 
            				placeholder="请输入">
			</el-input>
			<span v-else>{{scope.row.note}}</span>
		</template>
	</el-table-column>
</el-table>

2、

data(){
	return {
		clickCellRowIndex:null,//用于判断点击是哪行
		clickCellColumnIndex:null,//用于判断点击是哪列
	}
}

3、

methods{
    rowSubmitForm(row){
      console.log(row.drawAmount,123)
      if (row.drawAmount == null || row.drawAmount=='' ) {
        alert("请输入数量")
        this.getList();
        return false;
        }else {
        if(isNaN(row.drawAmount)){
          alert("请输入数字")
          this.getList();
          return false;
        }
          if (row.id != null) {
          updateAppDrawConfig(row).then(response => {
            this.$modal.msgSuccess("修改成功");
            this.getList();
          });
        }
      }

    },
	//输入框 失去焦点
	inputBlur(index,row){
		this.clickCellRowIndex = null
		this.clickCellColumnIndex = null

	},
	//点击cell
	cellClick(row,column,cell,event){
		this.clickCellRowIndex = row.index
		this.clickCellColumnIndex = column.index

	},
	//table初始化的时候给行和列 赋index
	getRowColumn({row,column,rowIndex,columnIndex}){
		row.index = rowIndex
		column.index = columnIndex
	},
}

下拉修改

<el-table-column align="center" label="账号状态" prop="state">
  <template slot-scope="scope">
    <el-select @change="isUserState(scope.row)" size="mini"  placeholder="请选择账号状态" v-model="scope.row.state">
      <el-option
        :key="dict.value"
        :label="dict.label"
        :value="parseInt(dict.value)"
        v-for="dict in dict.type.ums_user_state"
      ></el-option>
    </el-select>
  </template>
</el-table-column>

isUserState(row){
  updateUmsUser(row).then(response => {
    this.$modal.msgSuccess("修改成功");
    this.open = false;
    this.getList();
  });
},