个人主页网站申请,郑州 高端网站建设,广州最近流感很厉害吗,山东和城乡建设厅网站需求#xff1a;单点行编辑并且请求接口更新数据#xff0c;表格中某几个字段是下拉框取值的#xff0c;剩下的是文本域#xff1b;展示的时候 需要区分下拉框编码还是中文
故障模式这个展示的是fault_mode编码,但要显示的文字fault_mode_chn 这点需要注意 el-tablere…需求单点行编辑并且请求接口更新数据表格中某几个字段是下拉框取值的剩下的是文本域展示的时候 需要区分下拉框编码还是中文
故障模式这个展示的是fault_mode编码,但要显示的文字fault_mode_chn 这点需要注意 el-tablereftable:datatableDataList:header-cell-style{ background: #F5F7FA, height: 30px }stylewidth: 100%; margin: 0 autoheight100%aligncenterrow-keyidstripeborder:row-class-nametableRowClassNamecell-clicktabClick!--selecthandleSelectRowselect-allhandleSelectAllRowrow-clickhandleRowClickcurrent-changehandleRowCurrent--el-table-column aligncenter label操作 min-width60 fixedlefttemplate slot-scopescopediva classmc title修改 clickhandleAddMod(MOD, scope.row)em classel-icon-edit //aspan classspaces stylemargin: -2px 2px|/spana classmc title删除 clickhandleDel(scope.row)em slotreference classel-icon-delete mc stylecursor: pointer //a/div/template/el-table-column!-- el-table-column typeselection width40 fixed / --el-table-columnv-for(item, index) in viewColumns:keyindex:fixeditem.fixed:propitem.prop:alignitem.align:labelitem.label:min-widthitem.width:show-overflow-tooltiptrue!-- 行要能编辑 数据都能改 --template slot-scopescope!-- MQS项和重要项目下拉框都是一个值 --span v-ifscope.row.index tabClickIndex tabLabel item.label tabClickLabel 2el-select v-modelscope.row[item.prop] sizesmall stylewidth: 100% changehandleChange($event, scope.row)el-option v-for(and, ind) in mqsItemOption :keyind :labeland.text :valueand.text //el-select/span!-- 故障模式的 --span v-else-ifscope.row.index tabClickIndex tabLabel item.label tabClickLabel 4el-select v-modelscope.row[item.prop] v-focus sizesmall stylewidth: 100% changehandleChange($event, scope.row)el-option v-forand in faultModeOptions :keyand.id :labeland.text :valueand.id //el-select/span!-- 剩下的 都是文本域输入 --span v-else-ifscope.row.index tabClickIndex tabLabel item.label tabClickLabel 1el-inputv-modelscope.row[item.prop]v-focustypetextarea:row4classfixed-height-textareachangehandleChange($event, scope.row)//spanspan v-else v-htmlintFormatter(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 }})} 关于行编辑可以参考elementui官网提供的方法
