【vue】关于element table表格中 v-show 不能正确隐藏的问题
阅读: 634 回复: 0

发布于:2021-11-28

问题描述

从后台拿到的数据 true 或 false ,slot-scope="scope" 绑定数据  v-show 却不能正确隐藏

解决方案

经过在本地编写demo是没有问题的,你需要检查下是否有其他地方影响到了,demo案例如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<Child>
<template slot-scope="user">
<div v-if="user.isShow">hello</div>
</template>
</Child>
</div>

<script>
var component = {
name: "Child",
data() {
return {
isShow: false
}
},
template: "<div><template><slot :isShow='isShow'></slot></template></div>"
};


var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
},
components: {
"Child": component
}
});
</script>
</body>
</html>


当isShow: true 时

当isShow:false 时

无数据

此demo说明在slot中控制开关的显示隐藏没有问题

录屏实操

录屏暂未发布,请耐心等待