element的el-table组件，在插槽slot=“header“内，数据不更新的问题

最新推荐文章于 2025-01-07 11:15:28 发布

Yolo416

最新推荐文章于 2025-01-07 11:15:28 发布

阅读量3.1k

点赞数 6

分类专栏： vue项目文章标签： javascript 前端 elementui

原文链接：https://www.jianshu.com/p/a914fe5fe5e8

版权

vue项目专栏收录该内容

12 篇文章

订阅专栏

"在Vue中遇到一个组件内slot更新的问题，具体表现为在el-table的header插槽内使用父组件的属性phoneView进行逻辑判断，点击事件能够改变phoneView的值，但DOM并未相应更新。尝试将`slot="header"`改为`#header`后，问题得到解决，DOM能够正确响应phoneView的变化，显示正确的内容。"

摘要由CSDN通过智能技术生成

问题

在父组件中定义一个属性，如phoneView: false，在element的el-table组件header插槽内，使用这个属性来做一些逻辑处理，如下代码：

<div>
  <el-table ...>
    <el-table-column ...>
      <template slot="header">
        <div>
          <span @click="phoneView = !phoneView">手机号码</span>
          <span v-if="phoneView">1</span>
          <span v-else>2</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</div>

在点击事件修改phoneView的值之后，发现渲染的dom并没有修改。经过多次测试，发现在slot内部phoneView的值并没有改变，或者说改变后，又变回去了

解决方法

将slot="header"改成#header就可以了，如：

<div>
  <el-table ...>
    <el-table-column ...>
      <template #header>
        <div>
          <span @click="phoneView = !phoneView">手机号码</span>
          <span v-if="phoneView">1</span>
          <span v-else>2</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</div>