当前位置：首页 > news >正文

el-table行编辑

news 2025/7/2 3:37:55

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

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

        <el-tableref="table":data="tableDataList":header-cell-style="{ background: '#F5F7FA', height: '30px' }"style="width: 100%; margin: 0 auto"height="100%"align="center"row-key="id"stripeborder:row-class-name="tableRowClassName"@cell-click="tabClick"><!--@select="handleSelectRow"@select-all="handleSelectAllRow"@row-click="handleRowClick"@current-change="handleRowCurrent"--><el-table-column align="center" label="操作" min-width="60" fixed="left"><template slot-scope="scope"><div><a class="mc" title="修改" @click="handleAddMod('MOD', scope.row)"><em class="el-icon-edit" /></a><span class="spaces" style="margin: -2px 2px">|</span><a class="mc" title="删除" @click="handleDel(scope.row)"><em slot="reference" class="el-icon-delete mc" style="cursor: pointer" /></a></div></template></el-table-column><!-- <el-table-column type="selection" width="40" fixed /> --><el-table-columnv-for="(item, index) in viewColumns":key="index":fixed="item.fixed":prop="item.prop":align="item.align":label="item.label":min-width="item.width":show-overflow-tooltip="true"><!-- 行要能编辑  数据都能改 --><template slot-scope="scope"><!-- MQS项和重要项目下拉框都是一个值 --><span v-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '2'"><el-select v-model="scope.row[item.prop]" size="small" style="width: 100%" @change="handleChange($event, scope.row)"><el-option v-for="(and, ind) in mqsItemOption" :key="ind" :label="and.text" :value="and.text" /></el-select></span><!-- 故障模式的 --><span v-else-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '4'"><el-select v-model="scope.row[item.prop]" v-focus size="small" style="width: 100%" @change="handleChange($event, scope.row)"><el-option v-for="and in faultModeOptions" :key="and.id" :label="and.text" :value="and.id" /></el-select></span><!-- 剩下的 都是文本域输入 --><span v-else-if="scope.row.index === tabClickIndex && tabLabel == item.label && tabClickLabel == '1'"><el-inputv-model="scope.row[item.prop]"v-focustype="textarea":row="4"class="fixed-height-textarea"@change="handleChange($event, scope.row)"/></span><span v-else v-html="intFormatter(scope.row[item.prop], item.prop)" /></template></el-table-column><!-- 有修改删除功能 --></el-table>

    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 }) {// 把每一行的索引放进rowrow.index = rowIndex},intFormatter(data, item) {// 重要项、mqs项和故障模式三个是下拉框if (item == 'fault_mode') {const text = this.faultModeOptions.filter(item => item.id === data)[0]?.textreturn text || ''} else {return data}},handleChange(val, row) {row.fault_mode_chn = this.faultModeOptions.filter(item => item.id === row.fault_mode)[0]?.textupdItem(row).then(res => {if (res.result == '1') {this.$message.success('修改管理项成功')this.tabClickIndex = ''this.tabClickLabel = ''}})}