elementui表格里点击多个弹窗表格，切换不同弹窗表格，出现页面闪动

Question

想要实现：elementui表格里点击箭头指向单元格出现弹窗，弹窗里有表格，
问题：切换不同单元格时，页面闪动

代码：

<el-table-column
        label="推广数量"
        prop="share_count"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div
            style="cursor: pointer; text-decoration: underline"
            @click="numberDialog(row)"
          >
            {{ row.share_count }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="绑定人数"
        prop="binding_count"
        show-overflow-tooltip
      >
        <template #default="{ row }">
          <div
            style="cursor: pointer; text-decoration: underline"
            @click="userDialog(row)"
          >
            {{ row.binding_count }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="转换" prop="user_count" show-overflow-tooltip>
        <template #default="{ row }">
          <div
            style="cursor: pointer; text-decoration: underline"
            @click="ProductDialog(row)"
          >
            {{ row.user_count }}
          </div>
        </template>
      </el-table-column>
<el-dialog
      :title="numberTitle"
      :visible.sync="numberDialogShow"
      width="65%"
      @close="addclose"
      :key="this.dialogForm.pageSelling"
    >
      <el-table
        v-loading="listLoadingDialog"
        border
        class="cardtable"
        :data="numberDialogList"
        height="400px"
      >
        <el-table-column
          v-if="this.isConvert!= true"
          align="left"
          label="用户ID"
          prop="user_id"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="this.isConvert=== true"
          align="left"
          label="用户ID"
          prop="id"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="this.isNumber=== true||this.isConvert=== true"
          align="left"
          label="昵称"
          prop="nickname"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="this.isNumber=== true"
          align="left"
          label="code"
          prop="code"
          show-overflow-tooltip
        />
        <el-table-column
          align="left"
          label="渠道"
          prop="name"
          show-overflow-tooltip
        />
        <el-table-column
          align="left"
          label="类型"
          prop="type"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="this.isConvert!= true"
          align="left"
          label="时间"
          prop="created_at"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="this.isConvert=== true"
          align="left"
          label="充值时间"
          prop="created_at"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="this.isConvert=== true"
          align="left"
          label="充值金额"
          prop="goods_price"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="this.isConvert=== true"
          align="left"
          label="所购项目"
          prop="content"
          show-overflow-tooltip
        />

      </el-table>
      <el-pagination
        background
        :current-page="dialogForm.page"
        :layout="layout"
        :page-size="dialogForm.perPage"
        :total="numberDialogTotal"
        @current-change="numberDialogHandleCurrentChange"
        @size-change="numberDialogHandleSizeChange"
      />
    </el-dialog>
//数字点开--转换
      ProductDialog(row) {
        this.numberTitle = '渠道名下用户'
        this.numberDialogShow = true
        this.isNumber= false
        this.isConvert= true
        this.dialogForm.pageSelling=2
        this.fetchDataStatistics(row.id, 2)
      },
      //数字点开--推广数量
      numberDialog(row) {
        this.numberTitle = '推广记录'
        this.numberDialogShow = true
         this.isNumber= true
         this.isConvert= false
         this.dialogForm.pageSelling=0
        this.fetchDataStatistics(row.id, 0)
      },
//数字点开--绑定人数
      userDialog(row) {
        this.numberTitle = '绑定用户数据'
        this.numberDialogShow = true
        this.isNumber= false
        this.isConvert= false
        this.dialogForm.pageSelling=1
        this.fetchDataStatistics(row.id, 1)
      },
fetchDataStatistics(id, selling) {
        this.numberDialogList = []
        // this.listLoadingDialog = true
       let params =
         id +
         '?page=' +
         this.dialogForm.page +
         '&perPage=' +
         this.dialogForm.perPage
         this.dialogForm.pageID = id
         this.dialogForm.pageSelling = selling
       console.log(this.dialogForm.pageSelling)
       if(selling===0){
           getListRecord(params).then((res) => {
           this.numberDialogList = res.data
           this.numberDialogTotal = res.meta.pagination.total
           // this.listLoadingDialog = false
         })
       }else if(selling===1){
         getListBinding(params).then((res) => {
           this.numberDialogList = res.data
           this.numberDialogTotal = res.meta.pagination.total
           // this.listLoadingDialog = false
         })
       }else if(selling===2){
         getListUsers(params).then((res) => {
           this.numberDialogList = res.data
           this.numberDialogTotal = res.meta.pagination.total
           // this.listLoadingDialog = false
         })
       }
      },
 numberDialogHandleCurrentChange(val) {
        this.dialogForm.page = val
        this.fetchDataStatistics(
          this.dialogForm.pageID,
          this.dialogForm.pageSelling
        )
      },
      numberDialogHandleSizeChange(val) {
        this.dialogForm.perPage = val
        this.fetchDataStatistics(
          this.dialogForm.pageID,
          this.dialogForm.pageSelling
        )
      },

Answer 1

以下内容由CHATGPT及笑面虎共同生成、有用望采纳：

---

【您想要解决的问题】：您提问的目的是解决在使用Element UI库构建的表格中，点击单元格弹出弹窗表格时，页面出现闪动的问题。

【图片内容】：

1. 第一张图片显示了一个表格，其中包含了“手机号”、“用户ID”、“推广数量”、“推广人数”、“绑定人数”和“转换”等列。表格中列出了一些数据，并且每个条目旁边都有一个“生成推广数量链接”的操作按钮。
2. 第二张图片展示了一个“代理商推广统计”的界面，其中包含了“用户ID”、“昵称”、“code”、“渠道”、“类型”和“时间”等列。界面上列出了一些推广记录，并且每个记录旁边都有一个“操作”按钮。

【问题出现原因】：页面闪动的问题通常是由于在切换弹窗时，页面的DOM结构发生了变化，导致浏览器重新渲染，从而产生了视觉上的闪烁。在您提供的代码中，弹窗的显示是通过:visible.sync绑定的，这意味着每次点击单元格时，弹窗的状态都会改变，从而触发了重新渲染。

【问题解决方案】：为了减少页面的闪烁，可以采取以下措施：

1. 使用局部刷新而不是整个弹窗的刷新。例如，使用一个变量来控制当前弹窗的内容，而不是每次都重新渲染整个弹窗。
2. 使用异步组件来加载弹窗中的表格内容，这样可以避免在数据加载时的闪烁。
3. 使用CSS的will-change属性来优化渲染性能，告诉浏览器哪些属性可能会变化，以便浏览器可以预先准备。

【提供代码】：以下是对您的代码进行的一些修改，以减少页面闪烁：

// 在methods中添加一个用于控制当前弹窗内容的变量
data() {
  return {
    // ...
    activeDialog: null, // 添加这个变量
    // ...
  };
},
methods: {
  // ...
  ProductDialog(row) {
    this.numberTitle = '渠道名下用户';
    this.isNumber = false;
    this.isConvert = true;
    this.dialogForm.pageSelling = 2;
    this.fetchDataStatistics(row.id, 2);
    this.activeDialog = 'ProductDialog'; // 设置当前活动弹窗
  },
  // ...其他弹窗方法，同样添加这一行来设置activeDialog
  // ...
},
// 修改el-dialog的key绑定，使用activeDialog变量
<el-dialog
  :title="numberTitle"
  :visible.sync="numberDialogShow"
  width="65%"
  @close="addclose"
  :key="activeDialog" // 使用activeDialog变量作为key
>
  ...
</el-dialog>

【代码运行方式】：您需要在Vue项目中运行这段代码，确保Element UI库已经安装并且配置正确。

【代码预期运行结果】：当您点击表格单元格弹出弹窗时，页面不再出现闪烁，用户体验更加流畅。

【推荐相关链接】：

• Element UI 官方文档
• Vue.js 异步组件
• CSS will-change 属性