Vue + Element UI 实现复制当前行数据功能(复制到新增页面组件值不能更新等问题解决)

2023-11-23 16:29 由 GoodTimeGGB 发表于 #前端开发

1、需求

使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮，复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面，本文实现为跳转到新增页面。

2、实现

1）列表页 index.vue

<el-table>
<!-- 其他列 -->
<el-table-column label="操作" width="150">
   <template slot-scope="scope">
      <el-button icon="el-icon-copy-document" title="复制"  @click="toCopyNew(scope.row)"></el-button>
    </template>
  </el-table-column>
</el-table>

方法部分：用id来区分，正常新增id为0，复制id不为0

methods: {
	// 复制
	toCopyNew (item) {
	  const { url } = this.$getKey('这是是业务权限值，不需要这里可以不写')
	  this.$router.push(`/${url}-New/${item.Id}`)
	},
}

2）新增页 New.vue

data () {
    return {
      id: this.$route.params.id,
      dataList: [],
      form: {
        Name: '',
        BG: '',
        InfoJson: [],
      },
      rules: {
        Name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        BG: [
          { required: true, message: '请选择所属组织', trigger: 'change' },
        ],
        InfoJson: [
          { required: true, message: '请选择集合', trigger: 'blur' },
        ],
      },
      submitLoading: false,
    }
  },
  created () {
    if (this.id !== '0') {
      this._getDetail()
    }
  },
  methods: {
    async _getDetail () {
      try {
        // 获取详情接口
        const data = await GetInfo({
          Id: this.id * 1,
        })
        if (data) {
          this.form = data
          this.form.id = ''
          this.form.Name = data.Name
          this.form.BG= { Id: data.BG_Id, Name: data.BG_Name }
          this.form.InfoJson= JSON.parse(data.InfoJson)
          this.dataList = this.form.InfoJson
        }
      } catch (error) {}
    },
 }

3）问题

按上述代码操作后，点击列表操作栏的复制按钮会跳转到新增页面并且将当前行的数据复制到对应各个组件内，数据呈现和保存正常，但是发现了一个问题，数据无法修改，网上查阅资料应该异步获取详情信息且数据获取时打印输出下返回数据是否有问题等，具体分析如下

① 异步问题

确保数据的获取是异步完成的。如果你的数据是通过异步请求获取的，确保在数据返回之前不要执行任何赋值操作。你可以使用async/await或者.then()语法确保异步请求完成后再进行赋值。

② 数据是否正确

确保你查询到的数据是正确的。你可以在控制台打印查询到的数据，确保它包含你所需的信息。

③ Reactivity（响应性）

Vue.js中的响应性是通过数据属性的getter和setter来实现的。确保你正在使用Vue.js的响应性系统来更新数据。如果你是在异步操作中修改数据，确保在Vue.js的上下文中执行这些操作。

④ 组件是否正确渲染

确保组件已正确渲染，并且你正在尝试更改的数据在组件中可见。你可以在组件的模板中使用双花括号 {{ variable }} 来输出数据，以确保它们正在正确显示。

4）解决

经过排查，本文问题为周期和响应性问题，具体修改为调整周日created为mounted，调整数据返回的赋值方式改为响应式获取，思路和代码如下：

① 之前在 created 钩子中异步调用方法，可能会导致在数据获取之前组件渲染完成，这可能导致数据无法正确地绑定到组件。将数据获取移动到 mounted 钩子中，因为 mounted 钩子在组件已经挂载到 DOM 后触发，这时候可以确保组件已经渲染完成。

② Vue.js 需要对象是响应式的才能在数据更改时触发视图更新。确保你的 form 对象是在 data 中声明的，并且使用了 Vue.set 或 this.$set 来确保嵌套属性的响应性。

mounted () {
    if (this.id !== '0') {
      this._getDetail()
    }
  },
  methods: {
    async _getDetail () {
      try {
        // 获取详情接口
        const data = await GetInfo({
          Id: this.id * 1,
        })
        if (data) {
          this.form = data
          this.form.id = ''
          // 使用 Vue.set 或 this.$set 来确保响应性
          this.$set(this.form, 'Name', data.RG_Name)
          this.$set(this.form, 'Sign', data.RG_Sign)
          this.$set(this.form, 'BG', { Id: data.BG_Id, Name: data.BG_Name })
          this.$set(this.form, 'Sign', data.RG_Sign)
          this.$set(this.form, 'RuleJson', JSON.parse(data.RuleJson))
          this.dataList = this.form.RuleJson
        }
      } catch (error) {}
    },
 }

5）其他方便排查的原因在此做个列举

① 确保数据绑定正确

在模板中使用双花括号 {{ variable }} 输出数据，确保数据正确地绑定到组件。例如，你可以在模板中添加一些输出语句：

<template>
  <div>
    {{ form.Name }}
    {{ form.BG }}
    <!-- 其他组件的输出语句 -->
  </div>
</template>

这将帮助你确定是否有数据正确地传递到了组件

② 检查数据类型和结构

确保 GetInfo 返回的数据与你在 New.vue 中的期望一致。可以在 mounted 钩子中使用 console.log(data) 来查看获取的数据结构。

async _getDetail () {
  try {
    const data = await GetInfo({
      Id: this.id * 1,
    })
    console.log(data); // 查看数据结构
    // ... 其他代码
  } catch (error) {}
}

③ 检查是否有报错信息

查看浏览器控制台是否有任何错误消息。可能有网络请求问题或其他导致数据无法正确加载的问题。

④ 确保组件的 form 数据对象是响应式的

Vue.js 需要对象是响应式的才能在数据更改时触发视图更新。确保你的 form 对象是在 data 中声明的，并且使用了 Vue.set 或 this.$set 来确保嵌套属性的响应性。如本文解决办法