ele-table表格列表内，双击编辑部分信息（el-table组件同理）

说明

ele-table 为公司内部组件，重点看 【主要代码】 部分代码

ele-table表格列表内：双击需要编辑的区域，编辑部分信息

实现

双击需要编辑的数据，展示输入框/日期选择，

展示输入框：修改完之后，按键盘回车键，提交修改数据
展示日期选择：修改完之后，点击 √ 按钮，提交修改数据

页面展示

在这里插入图片描述

代码

<!-- 机动车巡查 -->
<template><div class="container"><ele-form-searchclass="container_search":form-data="searchData":form-desc="searchDesc"@search="fetchData"/><div class="container_btn"><el-button class="el-icon-plus" type="primary" size="mini" @click="operationHandler('add')">录入</el-button><el-button size="mini" @click="operationHandler('auto')">自动录入设置</el-button><a href="/downloadCenter/核查处理通知书.docx"><el-button size="mini">整改说明书下载</el-button></a></div><ele-tableclass="contariner_table":table-options="options":columns-options="columns":page.sync="searchData.page":page-size.sync="searchData.rows":total="total":show-fixed-control="false"><template #sffxwt="{ row }"><el-switchv-model="row.sffxwt"active-color="#13ce66"active-value="yes"inactive-value="no"@change="sffxwtChange($event, row)"></el-switch></template><!-- 【主要代码】 start --><template #czwt="{ row }"><el-inputv-if="row.czwtIsEdit"v-model="editValue"placeholder="请输入内容"size="mini"@keyup.enter.native="dbClickSubmit('czwt', row)"></el-input><span v-else @dblclick="dbClickEdit('czwt', row)">{{ row.czwt }}</span></template><template #ccrq="{ row }"><div v-if="row.ccrqIsEdit" class="ccrq"><el-date-pickerv-model="editValue"type="date"placeholder="选择日期"size="mini"format="yyyy-MM-dd"value-format="yyyy-MM-dd"/><el-buttontype="text"class="el-icon-check"@click="dbClickSubmit('ccrq', row)"></el-button></div><span v-else @dblclick="dbClickEdit('ccrq', row)">{{ row.ccrq }}</span></template><!-- 【主要代码】 end --><template #operation="{ row }"><el-button type="text" @click="detailHandler(row)">查看</el-button><el-button:disabled="row.sffxwt === 'no'"type="text"@click="operationHandler('upload', row)">上传</el-button><el-button type="text" @click="operationHandler('issued', row)">下发</el-button></template></ele-table><DetailDialog ref="DetailDialogRef" @update="fetchData" /><OperationDialog ref="OperationDialogRef" @update="fetchData" /></div>
</template>
<script>
import { mapGetters } from 'vuex'
import { listPage, update } from '@/api/neimeng/vehicle-inspection-feedback'
import { searchDesc } from './constant/formList'
import { columns } from './constant/columns'
import DetailDialog from './components/DetailDialog'
import OperationDialog from './components/OperationDialog'export default {name: 'VehicleInspection',components: { DetailDialog, OperationDialog },filters: {},data() {return {searchData: {page: 1,rows: 10},tableData: [],total: 0,editValue: ''}},computed: {...mapGetters(['glbmList']),searchDesc() {return searchDesc(this)},options() {return {data: this.tableData}},columns() {return columns(this)}},watch: {},created() {this.fetchData()},methods: {fetchData() {let { time, ...params } = this.searchDataif (time && time.length) {params.kssj = time[0]params.jssj = time[1]}listPage(params).then((res) => {this.common.CheckCode(res, null, () => {this.tableData = res.data.rows || []this.total = res.data.total || 0})})},sffxwtChange(val, row) {update({sffxwt: val,id: row.id}).then((res) => {this.$common.CheckCode(res, null, () => {this.fetchData()})})},/** ** 【主要代码】 start ****/getIndex(rowData) {return this.tableData.findIndex((item) => item.id === rowData.id)},dbClickEdit(key, rowData) {const isCanEdit = this.tableData.some((item) => {if (item.ccrqIsEdit || item.czwtIsEdit) return true})if (isCanEdit) return this.$message.error('请先编辑完当前数据再编辑下一个')this.editValue = key === 'ccrq' ? new Date(rowData[key]) : rowData[key]this.tableData[this.getIndex(rowData)][key + 'IsEdit'] = truethis.renderDom()},dbClickSubmit(key, rowData) {update({[key]: this.editValue,id: rowData.id}).then((res) => {this.$common.CheckCode(res, '修改成功', () => {this.fetchData()this.tableData[this.getIndex(rowData)][key + 'IsEdit'] = falsethis.renderDom()this.editValue = ''})})},renderDom() {this.tableData.push({})this.tableData.pop()},/** ** 【主要代码】 end ****/detailHandler(rowData) {this.$refs.DetailDialogRef.open(rowData)},operationHandler(type, rowData) {this.$refs.OperationDialogRef.open(type, rowData)}}
}
</script>
<style lang="scss" scoped>
.container {height: calc(100% - 52px);&_search {padding: 10px;margin-bottom: 10px;::v-deep .el-form-item__content {text-align: left;}}&_btn {background-color: #fff;padding: 10px 10px 0;text-align: left;.el-icon-plus {margin-bottom: 10px;}a {margin-left: 10px;}}.contariner_table {height: calc(100% - 100px);::v-deep .ele-table-pagination {position: fixed;bottom: 0;justify-content: center;z-index: 10;}.upload-demo {display: inline-block;}.ccrq {width: 100%;display: inline-block;::v-deep .el-date-editor {width: calc(100% - 22px);}.el-icon-check {padding: 0;cursor: pointer;font-size: 20px;}}}
}.blue-theme {.container_btn {background-color: #293f60;color: #fff;}
}
.night-theme {.container_btn {background-color: #1a2331;color: #fff;}
}
</style>

./constant/formList.js

import { getToken } from '@/utils/auth'const sffxwtOptions = [{value: 'yes',text: '是'},{value: 'no',text: '否'}
]export const searchDesc = (_this) => {return {jczmc: {type: 'input',label: '监测站名称',attrs: {clearable: true},layout: 8},fzjg: {type: 'input',label: '盟市',attrs: {clearable: true},layout: 8},sffxwt: {type: 'select',label: '是否发现问题',attrs: {clearable: true},layout: 8,options: sffxwtOptions},time: {type: 'daterange',label: '巡查时间',attrs: {clearable: true,valueFormat: 'yyyy-MM-dd'},layout: 8}}
}export const detailFormDesc = (_this) => {return {carInfo: {hpzl: {type: 'select',label: '号牌种类',layout: 8,render: (h, content, value) => {return <span>{_this.common.filter_dic('mon_business_hpzl', value)}</span>}},hphm: {type: 'input',label: '号牌号码',layout: 8},jdczt: {type: 'input',label: '机动车状态',layout: 8},syr: {type: 'input',label: '所有人',layout: 8},sfzmhm: {type: 'input',label: '身份证号',layout: 8},lxfs: {type: 'input',label: '联系方式',layout: 8},zsxxdz: {type: 'input',label: '住址',layout: 8},zzxxdz: {type: 'input',label: '暂住地址',layout: 8},ccdjrq: {type: 'input',label: '初次登记日期',layout: 8},yxqz: {type: 'input',label: '有效期止',layout: 8},qzbfqz: {type: 'input',label: '强制报废日期止',layout: 8},yqjyqzbfqz: {type: 'input',label: '逾期检验强制报废期止',layout: 8},syq: {vif: _this.drawerType === 'detail',type: 'input',label: '所有权',layout: 8,render: (h, content, value) => {const cur = sffxwtOptions.find((i) => i.value === value)return <span>{(cur && cur.text) || '暂无'}</span>}},sqztmc: {vif: _this.drawerType === 'detail',type: 'input',label: '申请状态',layout: 8},bz: {vif: _this.drawerType === 'detail',type: 'input',label: '车辆备注信息',layout: 8}},applyInfo: {clbz: {type: 'input',label: '车辆备注信息',layout: _this.drawerType === 'apply' ? 24 : 8,default: _this.carInfo.bz,disabled: true},[_this.drawerType === 'apply' ? 'zrbm' : 'zrbmmc']: {type: 'select',label: '申请转入部门',layout: _this.drawerType === 'apply' ? 24 : 8,required: true,options: _this.glbmOptions,prop: {value: 'value',text: 'label'},attrs: {clearable: true}},bz: {type: 'textarea',label: '申请备注',layout: _this.drawerType === 'apply' ? 24 : 8,attrs: {clearable: true}},cjr: {vif: ['examineDetail', 'examine'].includes(_this.drawerType),type: 'input',label: '申请人',layout: 8},sqbm: {vif: ['examineDetail', 'examine'].includes(_this.drawerType),type: 'input',label: '申请人部门',layout: 8},sqsj: {vif: ['examineDetail', 'examine'].includes(_this.drawerType),type: 'input',label: '申请时间',layout: 8}},examineInfo: {clyj: {type: 'textarea',label: '审核备注',layout: _this.drawerType === 'examine' ? 24 : 16,attrs: {clearable: true}},clr: {vif: ['examineDetail'].includes(_this.drawerType),type: 'input',label: '审核人',layout: 8},clsj: {vif: ['examineDetail'].includes(_this.drawerType),type: 'input',label: '审核时间',layout: 16}}}
}export const operationFormDesc = (_this) => {return {auto: {lrpl: {type: 'input',label: '',labelWidth: 0,layout: 24},lrsl: {type: 'input',label: '',labelWidth: 0,layout: 24}},issued: {xfbm: {type: 'select',label: '下发部门',layout: 24,options: _this.glbmOptions,prop: {value: 'value',text: 'label'},attrs: {clearable: true}}},upload: {zgsms: {type: 'upload',label: '上传文件',layout: 24,attrs: {// accept: 'image/*',label: '上传文件',multiple: false,autoUpload: true,limit: 1,// listType: 'picture-card',blockSize: 'middle',params: { relativePath: 'NMXCFile/' },uploadAPI: '/supervise_basic/upload/oss/fileupload',token: getToken(),beforeUpload: _this.beforeUploadHandler,'on-exceed': () => {_this.$message('最多允许传一个文件')}}}}}
}

./constant/columns.js

import moment from 'moment'
export const columns = (_this) => {return [{type: 'index',label: '序号',index: (index) => {return (_this.searchData.page - 1) * _this.searchData.rows + index + 1}},{prop: 'fzjg',label: '盟市'},{prop: 'lsh',label: '流水号'},{prop: 'jczmc',label: '监测站名称'},{prop: 'hphm',label: '车牌号'},{prop: 'cllx',label: '车辆类型'},{prop: 'sffxwt',label: '是否发现问题'},{prop: 'czwt',label: '存在问题'},{prop: 'ccrq',label: '抽查日期'},{prop: 'operation',label: '操作',fixed: 'right',width: 150}]
}