vue that.modelXxqs = Object.assign({},record)

这段代码是使用 Vue 框架中的对象方法 `Object.assign()` 将 `record` 对象的属性复制到 `that.modelXxqs` 对象中。`Object.assign()` 方法接收多个参数，第一个参数是目标对象，后面的参数都是源对象，它们的属性将被复制到目标对象中。这里的目标对象是 `that.modelXxqs`，即将 `record` 对象的属性复制到 `that.modelXxqs` 对象中。需要注意的是，`Object.assign()` 方法执行的是浅拷贝，即只复制对象的属性值，而不会复制对象的引用。

相关问题

优化这段代码：import { reactive, toRaw } from 'vue' // 分页钩子函数 interface Options { page?: number size?: number fetchFun: (_arg: any) => Promise<any> params?: Record<any, any> firstLoading?: boolean } export function usePaging(options: Options) { const { page = 1, size = 15, fetchFun, params = {}, firstLoading = false } = options // 记录分页初始参数 const paramsInit: Record<any, any> = Object.assign({}, toRaw(params)) // 分页数据 const pager = reactive({ page, size, loading: firstLoading, count: 0, lists: [] as any[], extend: {} as Record<string, any> }) // 请求分页接口 const getLists = () => { pager.loading = true return fetchFun({ page_no: pager.page, page_size: pager.size, ...params }) .then((res: any) => { pager.count = res?.count pager.lists = res?.lists pager.extend = res?.extend return Promise.resolve(res) }) .catch((err: any) => { return Promise.reject(err) }) .finally(() => { pager.loading = false }) } // 重置为第一页 const resetPage = () => { pager.page = 1 getLists() } // 重置参数 const resetParams = () => { Object.keys(paramsInit).forEach((item) => { params[item] = paramsInit[item] }) getLists() } return { pager, getLists, resetParams, resetPage } }

以下为优化后的代码：

import { reactive, toRaw } from 'vue'

interface Options {
page?: number
size?: number
fetchFun: (_arg: any) => Promise<any>
params?: Record<any, any>
firstLoading?: boolean
}

export function usePaging(options: Options) {
const { page = 1, size = 15, fetchFun, params = {}, firstLoading = false } = options

const paramsInit: Record<any, any> = toRaw(params)

const pager = reactive({
page,
size,
loading: firstLoading,
count: 0,
lists: [] as any[],
extend: {} as Record<string, any>
})

const getLists = async () => {
pager.loading = true
try {
const res = await fetchFun({
page_no: pager.page,
page_size: pager.size,
...params
})
pager.count = res?.count
pager.lists = res?.lists
pager.extend = res?.extend
return Promise.resolve(res)
} catch (err) {
return Promise.reject(err)
} finally {
pager.loading = false
}
}

const resetPage = () => {
pager.page = 1
getLists()
}

const resetParams = () => {
Object.assign(params, paramsInit)
getLists()
}

return {
pager,
getLists,
resetParams,
resetPage
}
}

优化的部分包括：

1. 使用 async/await 替代 Promise.then() 语法，使代码更加简洁易读，同时也更具可读性。

2. 重置参数部分使用 Object.assign() 替代 Object.keys(paramsInit).forEach() 语法，可以更简洁地实现参数重置操作。

怎么满足在来源中再加两个值可编辑可保存<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>

这段代码是一个Vue组件，实现了一个展示表格数据的功能，其中包括了编辑、保存、删除、新增等操作。在模板中，使用了一个基于 v-for 的循环，对表格中的每一列都进行了处理，其中用到了 Vue 组件的 scopedSlots 特性。在 data 中定义了两个数组，分别是 editableData 和 dataSource，分别表示当前正在编辑的数据和表格数据。在 methods 中定义了四个方法，用于实现新增、删除、编辑和保存功能。其中，addItem 方法用于新增一行数据，deleteItem 方法用于删除一行数据，edit 方法用于进入编辑状态，save 方法用于保存编辑后的数据。