ele-table表格列表内双击编辑部分信息的示例代码(el-table组件同理)
作者:Fighting_p
本文介绍如何在ele-table组件中实现双击编辑功能,通过双击表格列表内需要编辑的区域,可以展示输入框或日期选择器进行数据修改,修改完成后,通过按回车键或点击确认按钮提交修改数据,感兴趣的朋友一起看看吧
说明
ele-table 为公司内部组件,重点看 【主要代码】 部分代码
ele-table表格列表内:双击需要编辑的区域,编辑部分信息
实现
双击需要编辑的数据,展示输入框/日期选择,
展示输入框:修改完之后,按键盘回车键,提交修改数据展示日期选择:修改完之后,点击 √ 按钮,提交修改数据
页面展示
代码
<!-- 机动车巡查 --> <template> <div class="container"> <ele-form-search class="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" rel="external nofollow" > <el-button size="mini">整改说明书下载</el-button> </a> </div> <ele-table class="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-switch v-model="row.sffxwt" active-color="#13ce66" active-value="yes" inactive-value="no" @change="sffxwtChange($event, row)" > </el-switch> </template> <!-- 【主要代码】 start --> <template #czwt="{ row }"> <el-input v-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-picker v-model="editValue" type="date" placeholder="选择日期" size="mini" format="yyyy-MM-dd" value-format="yyyy-MM-dd" /> <el-button type="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.searchData if (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'] = true this.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'] = false this.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 } ] }
到此这篇关于ele-table表格列表内,双击编辑部分信息(el-table组件同理)的文章就介绍到这了,更多相关ele-table表格双击编辑信息内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!