实现在columns中的简称中三个值进行编辑和新增<template> <div> <a-table :pagination="false" :columns="columns" :dataSource="dataSource"> //循环展示数据或input输入框 <template v-for="col in ['abbreviation', 'fullName', 'nodes']" :slot="col" slot-scope="text, record, index" > <div :key="col"> <a-input v-if="editableData[record.key]" v-model="editableData[record.key][col]" /> <template v-else>{{ text }}</template> </div> </template> //操作 <template slot="operation" slot-scope="text, record, index"> <span v-if="editableData[record.key]"> <a-icon type="check" @click="save(record.key)" /> </span> <span v-else> <a-icon type="delete" @click="deleteItem(record.key)" /> <a-icon type="edit" @click="edit(record.key)" /> <a-icon type="plus" v-if="index==dataSource.length-1" @click="addItem(record.key)" /> </span> </template> </a-table> </div> </template> <script> import { cloneDeep } from "lodash"; export default { data() { return { editableData: [], //正在编辑的数组 columns: [ { title: "简称", dataIndex: "abbreviation", scopedSlots: { customRender: "abbreviation" } }, { title: "全称", dataIndex: "fullName", scopedSlots: { customRender: "fullName" } }, { title: "来源", dataIndex: "nodes", scopedSlots: { customRender: "nodes" } }, { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" } } ], //表格数据 dataSource: [ { key: 0, abbreviation: "简称1", fullName: "全称1", nodes: "来源1" }, { key: 1, abbreviation: "简称2", fullName: "全称2", nodes: "来源2" }, { key: 2, abbreviation: "简称3", fullName: "全称3", nodes: "来源3" }, { key: 3, abbreviation: "简称14", fullName: "全称14", nodes: "来源14" } ] }; }, components: {}, props: ["tableDatas"], watch: {}, updated() {}, created() {}, methods: { addItem(key) { let item = { key: key + 1, abbreviation: "", fullName: "", nodes: "" }; this.dataSource.splice(key + 1, 0, item); this.$set(this.editableData, key + 1, item); }, deleteItem(key) { this.dataSource = this.dataSource.filter(item => item.key !== key); }, edit(key) { let editItem = cloneDeep( this.dataSource.filter(item => key === item.key)[0] ); this.$set(this.editableData, key, editItem); }, save(key) { Object.assign( this.dataSource.filter(item => key === item.key)[0], this.editableData[key] ); this.$set(this.editableData, key, null); } } }; </script>
时间: 2023-07-19 10:38:18 浏览: 46
这段代码是一个基于 ant-design-vue 组件库的表格编辑组件,通过循环展示数据或 input 输入框来实现对表格中的数据进行编辑和新增。其中,使用了 scopedSlots 来自定义表格列的渲染方式,操作列中的四个图标分别对应删除、编辑、保存和新增操作。同时,利用了 editableData 数组来记录正在编辑的数据,以便在保存时进行更新。具体实现过程可以参考代码中的注释。
相关问题
实现在columns中的简称中三个值进行编辑和新增
这段代码是一个基于 ant-design-vue 组件库的表格编辑组件,通过循环展示数据或 input 输入框来实现对表格中的数据进行编辑和新增。其中,使用了 scopedSlots 来自定义表格列的渲染方式,操作列中的四个图标分别对应删除、编辑、保存和新增操作。同时,利用了 editableData 数组来记录正在编辑的数据,以便在保存时进行更新。具体实现过程可以参考代码中的注释。
为了实现在 columns 中的简称中三个值进行编辑和新增,我们需要对代码进行一些修改。具体来说,我们需要在 columns 中添加三个名为 "abbreviation", "fullName" 和 "nodes" 的列,用于展示和编辑表格数据中的简称、全称和来源三个值。同时,我们需要在模板中为这三个列添加对应的 slot,并利用 v-for 进行循环渲染。在 slot 中,我们使用 v-if 判断当前数据是否在编辑状态,并根据情况渲染 input 输入框或普通文本。具体修改后的代码如下:
```html
<template>
<div>
<a-table :pagination="false" :columns="columns" :dataSource="dataSource">
<!-- 简称、全称、来源三列 -->
<template v-for="col in ['abbreviation', 'fullName', 'nodes']" :slot="col" slot-scope="text, record, index">
<div :key="col">
<a-input v-if="editableData[record.key]" v-model="editableData[record.key][col]" />
<template v-else>{{ text }}</template>
</div>
</template>
<!-- 操作列 -->
<template slot="operation" slot-scope="text, record, index">
<span v-if="editableData[record.key]">
<a-icon type="check" @click="save(record.key)" />
</span>
<span v-else>
<a-icon type="delete" @click="deleteItem(record.key)" />
<a-icon type="edit" @click="edit(record.key)" />
<a-icon type="plus" v-if="index==dataSource.length-1" @click="addItem(record.key)" />
</span>
</template>
</a-table>
</div>
</template>
<script>
import { cloneDeep } from "lodash";
export default {
data() {
return {
editableData: [], // 正在编辑的数组
columns: [
{ title: "简称", dataIndex: "abbreviation", scopedSlots: { customRender: "abbreviation" } },
{ title: "全称", dataIndex: "fullName", scopedSlots: { customRender: "fullName" } },
{ title: "来源", dataIndex: "nodes", scopedSlots: { customRender: "nodes" } },
{ title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" } }
],
dataSource: [
{ key: 0, abbreviation: "简称1", fullName: "全称1", nodes: "来源1" },
{ key: 1, abbreviation: "简称2", fullName: "全称2", nodes: "来源2" },
{ key: 2, abbreviation: "简称3", fullName: "全称3", nodes: "来源3" },
{ key: 3, abbreviation: "简称14", fullName: "全称14", nodes: "来源14" }
]
};
},
components: {},
props: ["tableDatas"],
watch: {},
updated() {},
created() {},
methods: {
addItem(key) {
let item = { key: key + 1, abbreviation: "", fullName: "", nodes: "" };
this.dataSource.splice(key + 1, 0, item);
this.$set(this.editableData, key + 1, item);
},
deleteItem(key) {
this.dataSource = this.dataSource.filter(item => item.key !== key);
},
edit(key) {
let editItem = cloneDeep(this.dataSource.filter(item => key === item.key)[0]);
this.$set(this.editableData, key, editItem);
},
save(key) {
Object.assign(this.dataSource.filter(item => key === item.key)[0], this.editableData[key]);
this.$set(this.editableData, key, null);
}
}
};
</script>
```
<q-table style="margin-top: 15px" :rows="rows" :columns="columns" row-key="ID" :pagination="pigitions" dense :filter="filter" :loading="loading" :visible-columns="visibleColumns"> <template v-slot:body-cell-WorkType="props"> <q-td :props="props"> <div> <q-btn @click="showDetail(props.row.IPSID)" color="purple" flat dense no-caps :label="props.value" /> </div> </q-td> </template> </q-table> 怎么在v-slot:body-cell-WorkType里获取被隐藏的IPSID的数据
在 `v-slot:body-cell-WorkType` 中获取被隐藏的 `IPSID` 数据,你可以通过 `props.row` 对象来访问整行的数据。即使列被隐藏,所有的列数据仍然会包含在 `props.row` 中。
在你的 `v-slot:body-cell-WorkType` 模板中,你可以使用 `props.row.IPSID` 来获取被隐藏的 `IPSID` 数据。例如:
```html
<template v-slot:body-cell-WorkType="props">
<q-td :props="props">
<div>
<q-btn @click="showDetail(props.row.IPSID)" color="purple" flat dense no-caps :label="props.value" />
</div>
</q-td>
</template>
```
上述示例中,`props.row.IPSID` 就是被隐藏的 `IPSID` 数据,你可以将其传递给 `showDetail` 方法或在其他地方使用。
希望这可以解决你的问题!如果还有其他疑问,请随时提问。