在表格内的表具编号前面加一个编辑图标点击可以编辑表格内的所有表具编号

要在表格内为每个“表具编号”添加一个编辑图标，并实现点击后可编辑功能，需要做以下调整： 1. **修改列配置**： - 在 `columns` 配置中，针对 `表具编号` 列添加一个 `customRender` 属性来插入编辑图标。 2. **编写编辑逻辑**： - 使用 Vue 的双向绑定和事件处理机制来实现编辑功能。 ### 修改后的代码示例 ```vue <template> <a-card :bordered="false"> <div class="table-page-search-wrapper"> <div class="table-operator"> <a-button @click="showDrawer" type="primary" icon="plus">批量导入</a-button> <a-dropdown v-if="selectedRowKeys.length == 0"> <a-menu slot="overlay"> <a-menu-item key="1" @click="batchDel"><a-icon type="delete"/> 删除</a-menu-item> </a-menu> <a-button>批量操作<a-icon type="down"/></a-button> </a-dropdown> </div> </div> <a-table ref="table" :size="tableRowHeight" :scroll="{ x: true }" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" class="j-table-force-nowrap" @change="handleTableChange" > <span slot="action" slot-scope="text, record"> <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)"> <a>移除</a> </a-popconfirm> </span> <!-- 添加编辑图标 --> <span slot="meterNum" slot-scope="text, record"> <a-input v-if="record.editable" :value="record.meterNum" @input="(val) => handleInput(val, record)" @pressEnter="handleSave(record)" /> <span v-else> <span>{{ text }}</span> <a-icon type="edit" @click="startEdit(record)" style="margin-left: 8px; color: blue; cursor: pointer;" /> </span> </span> </a-table> <a-button @click="handleAdd3" type="primary">新表检定信息</a-button> <StockMeterBaseDrawer ref="modalForm" @ok="modalFormOk"></StockMeterBaseDrawer> </a-card> </template> <script> import '@/assets/less/TableExpand.less' import { mixinDevice } from '@/utils/mixin' import draggable from 'vuedraggable' import { JeecgListMixin } from '@/mixins/JeecgListMixin' import JSuperQuery from '@/components/jeecg/JSuperQuery.vue' import { initColumnsMixin } from '@/mixins/publicInitColumnsMixinNew' import BizBatchImport from '../modules/BizBatchImport.vue' import StockMeterBaseDrawer from '../modules/StockMeterBaseDrawer1.vue' export default { name: 'BizMeterEdit', mixins: [JeecgListMixin, mixinDevice, initColumnsMixin], components: { StockMeterBaseDrawer, JSuperQuery, draggable, BizBatchImport }, data() { return { visible: false, defColumns: [ { title: '*表具编号', align: 'center', dataIndex: 'meterNum', scopedSlots: { customRender: 'meterNum' } }, // 其他列配置保持不变 ], url: { list: '/stock/stockMeterBase/list', delete: '/stock/stockMeterBase/delete', deleteBatch: '/stock/stockMeterBase/deleteBatch', changeStatusBatch: '/stock/stockMeterBase/changeStatusBatch', exportXlsxUrl: '/stock/stockMeterBase/exportExcel', importXlsxUrl: '/stock/stockMeterBase/importExcel', exportXlsxTemplateUrl: '/stock/stockMeterBase/exportExcelTemplate' }, dictOptions: {}, superFieldList: [], editableData: {} }; }, created() { this.getSuperFieldList(); }, methods: { showDrawer() { this.visible = true; }, onClose() { this.visible = false; }, getSuperFieldList() { // 现有的字段列表获取逻辑 }, startEdit(record) { // 设置记录为可编辑状态 this.$set(this.editableData, record.key, true); setTimeout(() => this.$refs[`editableCell${record.key}`].focus(), 0); }, handleInput(val, record) { // 更新记录的表具编号 record.meterNum = val.target.value; }, handleSave(record) { // 将记录保存并设置为不可编辑 const meterNum = record.meterNum.trim(); if (!meterNum) { this.$message.error(`表具编号不能为空`); } else { record.meterNum = meterNum; delete this.editableData[record.key]; } }, // 其他方法保持不变 } }; </script> <style lang="less" scoped></style> ``` ### 关键点解释 1. **`scopedSlots`属性**： - 通过 `scopedSlots` 属性，在 `表具编号` 列中插入了自定义的插槽内容。 - 如果记录处于编辑状态 (`editable`)，则显示输入框；否则显示文本和编辑图标。 2. **`editableData`对象**： - `editableData` 对象用于跟踪哪些记录当前处于编辑状态。 - `startEdit` 方法将记录标记为可编辑状态，并聚焦输入框。 - `handleInput` 方法用于捕获输入框的值变化。 - `handleSave` 方法用于保存编辑的内容并关闭编辑模式。 3. **输入框的焦点管理**： - 使用 `setTimeout` 来延迟聚焦输入框，以确保 DOM 完全渲染完毕后再进行聚焦。 这样就实现了点击编辑图标后可编辑“表具编号”的功能。