vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue el-table引入组件实时传参

Vue el-table表头上引入组件不能实时传参解决方法分析

作者:@乐知者@

这篇文章主要介绍了Vue el-table表头上引入组件不能实时传参解决方法,总的来说这并不是一道难题,那为什么要拿出这道题介绍?拿出这道题真正想要传达的是解题的思路,以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路

场景还原

产品要求:点击表格的表头,能触发一个下拉的列表,列表能携带表格的筛选条件,获取相应的数据

写了一个demo,来还原一下bug出现的场景:

<div id="demo">
  <el-table
    :data="tableData"
    style="width: 100%"
  >
    <el-table-column
      prop="date"
      label="日期"
      width="180"
    ></el-table-column>
    <el-table-column
      prop="address"
      label="地址"
      width="180"
    >
      <template slot="header">
        <city-component
          :params="paramsData"
        ></city-component>
      </template>
    </el-table-column>
  </el-table>
</div>
data: {
        tableData: [], // 表格数据
        paramsData: {} // 传递给组件的数据
    },
    methods: {
      // 改变paramsData函数
      changeParamsDataFn() {
        this.paramsData = date.now().getTime();
      }
    }

在el-table表格的表头中,引入组件 city-component,需要将数据paramsData传递给组件使用。

第一次进入页面时,paramsData第一次被初始化赋值,DOM渲染el-table完成后,是可以正常使用;但若是需要更改paramsData的值,并且同步传递给city-component组件使用时,打印paramsData的值,是可以看到改值的变化,但是组件却无法接受到变化后的paramsData的值

解决方法

(1)给el-table加上一个 :key=tableKeyValue

(2)在改变paramsData后,改变 tableKeyValue的值

<el-table
   :key="tableKeyValue"          
>
<!-- 其他跟上面一致 -->
</el-table>
methods: {
    changeParamsDataFn() {
        this.tableKeyValue = "city" + date.noe();
    }
}

出现原因

这就得先说说,Vue的渲染机制:虚拟DOM+diff算法

因为表格的DOM没有变化,数据改变后,修改后的DOM与原来的DOM一致,无法重新渲染表格。虽然我们能打印出数据的变化,但是无法将数据传入组件。

加上key值,是为了数据改变的同时,改变table的key值,diff算法就能找出前后表格DOM的不同,就能重新渲染表格,重新把值传入组件

似乎也可以将key值,加在引入组件的单元格上,没有真正写过,下次遇到这类问题可以试试

到此这篇关于Vue el-table表头上引入组件不能实时传参解决方法分析的文章就介绍到这了,更多相关Vue el-table引入组件实时传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

您可能感兴趣的文章:
阅读全文