Elementplus_table可编辑模式

el-table自身没有编辑模式，需要自己写。

其他的组件试了几种，虽然有编辑模式，但都不太合适，用起来无法满足需要，只好自己试着改改了。记录一下。

编辑模式中包含：input和select。

正常模式

 编辑模式

 ====================

<el-table                  
                :data="tableDataRGrollNG" 
                :header-cell-style="myTableHeaderStyle"  
                border 
                
                class="dataTable"                 
                height="300"                
                
                :cell-style="cellStyle"                
                >                
                    <!-- <el-table-column type="selection" width="50" align="center"/> -->
                    <el-table-column type="index" label="No" width="50" align="center"/>
                    <!-- 注：这里的滚轮区分是指材质 -->
                    <el-table-column prop="caizhi" label="滚轮区分" align="center"/>
                    <el-table-column prop="rollno" label="编号" align="center"/>                        
                    
                    <el-table-column prop="nowbm" label="表面" align="center">                        
                        <template #default="scope">
                          <select class="sel70" v-show="scope.row.showmode" v-model="selbm" >
                            <option
                              v-for="item in optionsBMList"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value"
                              
                            ></option>
                          </select>
                          <!-- <el-input v-show="!scope.row.showmode" v-model="scope.row.nowbm" style="width:70px;"></el-input> -->
                          <p v-show="!scope.row.showmode">{{scope.row.nowbm}}</p> 
                        </template>
                    </el-table-column>                                                                         
                    <el-table-column prop="nowd" label="滚轮直径" align="center">                        
                        <template #default="scope">
                          <el-input v-show="scope.row.showmode" v-model="scope.row.nowd" style="width:70px;"></el-input>
                          <p v-show="!scope.row.showmode">{{scope.row.nowd}}</p> 
                        </template>
                    </el-table-column>
                    <el-table-column prop="fnote" label="备注" align="center">
                      <template #default="scope" >
                        <el-input v-show="scope.row.showmode" v-model="scope.row.fnote" style="width:70px;"></el-input>
                        <p v-show="!scope.row.showmode">{{scope.row.fnote}}</p> 
                      </template>                     
                    </el-table-column>
                    <el-table-column  prop="" label="操作" align="center" width="180">
                      <template #default="scope2">
                        <div v-show="scope2.row.showbtn">
                          <el-button type="primary" @click="clkEditYM(scope2)">研磨</el-button>
                          <el-button type="" @click="clkEditBL(scope2)">保留</el-button>
                        </div>
                        <div v-show="!scope2.row.showbtn">
                          <el-button type="danger" @click="clkSaveUpdateDYM(scope2)">保存</el-button>
                          <el-button type="warning" @click="clkEditCancel(scope2)">取消</el-button>
                        </div>
                        
                      </template>                  
                    </el-table-column>
              </el-table>

在列中添加模板，设置显示状态。

默认模式显示<p>，用于显示表格数据

编辑模式显示<el-input>，用于修改数据

点击编辑按钮时，切换编辑状态

export const clkEditYM = (scope1) => {
//   获取当前时间
    let newDate = new Date();
    let starttime = formatDatetoC(newDate.toLocaleString())

    // 若开始时间单元格为空，则自动获取当前时间
    if(scope1.row.starttime!=""&&scope1.row.starttime!=null){

    }else if(scope1.row.starttime==""){
        scope1.row.starttime = starttime
    }
    
    // 表格处于修改状态
    tbsts.value = "xg"
    
    // 表面区分下拉框默认值
    selbmqf.value = Rtrim(scope1.row.selbmqf)
    // 表面下拉框默认值
    selbm.value = Rtrim(scope1.row.selbm)
    // 作业者下拉框默认值
    seloper.value = Rtrim(scope1.row.seloper)

    // 判断表格按钮组状态
    btngroupChange(tbsts.value,scope1)

}

// 表格按钮组变化
function btngroupChange(tbstsvalue,scope1){

  // 1、表格处于非修改状态
  if(tbstsvalue == "xg"){
    // 使修改项显示为true（变为可修改状态）
    scope1.row.showmode = true
    // 使按钮组显示为 保存/取消 按钮
    scope1.row.showbtn = false  
  }else if(tbstsvalue == "fxg"){
    // 使修改项显示为false（变为不可修改状态）
    scope1.row.showmode = false
    // 使按钮组显示为 编辑/取消 按钮
    scope1.row.showbtn = true
  }
}

showmode=true:表格编辑模式

showmode=false:表格默认模式