需求：单点行编辑并且请求接口更新数据，表格中某几个字段是下拉框取值的，剩下的是文本域；展示的时候 需要区分下拉框编码还是中文
故障模式这个展示的是fault_mode编码,但要显示的文字fault_mode_chn 这点需要注意
html
<el-table
ref="table"
:data="tableDataList"
:header-cell-style="{ background: '#F5F7FA', height: '30px' }"
style="width: 100%; margin: 0 auto"
height="100%"
align="center"
row-key="id"
stripe
border
: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-column
v-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-input
v-model="scope.row[item.prop]"
v-focus
type="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>
javascript
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官网提供的方法