Vue element-ui 使用js动态调整样式

Vue element-ui 使用js动态调整样式

author: fengclchn@outlook.com

date: 09/07/2021

• 实现一个选择框（el-select）内容改变，就显示卡片（el-card）的功能
• 给组件绑定ref属性

<el-card class="planCard" ref="planCard"></el-card>

• 设置原始的css（原始为不出现）

.planCard {
  margin: 20px 20px 0;
  overflow-x: auto;
  display: none;
}

• js代码控制 planCard 出现

getPlanDetails() {
  this.$refs["planCard"].$el["style"].display = "block"; //注意此处的写法
},

• 绑定事件

<el-select @change="getPlanDetails"></el-select>