首页 > 其他分享 >ElementUI中Table和Switch组件中插槽scope应用使用场景

ElementUI中Table和Switch组件中插槽scope应用使用场景

时间:2022-11-08 21:25:29浏览次数:37  
标签:use ElementUI element Switch Table scope

ElementUI中Table和Switch组件中插槽scope应用使用场景

ElementUI 安装

npm i element-ui -S

引入 Element

main.js 内容添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

按需引入和注册

别忘了table和Switch组件的按需引入和注册--在element.js中引入

import {  Table, TableColumn, Switch  } from "element-ui";

Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Switch)

 

 

使用插槽slot-scope方式拿到表格数据。直接给开关的v-model属性绑定。开关Siwtch的v-model是布尔值,scope.row.mg_state是拿到后台数据中的状态值:true或false

 

 

标签:use,ElementUI,element,Switch,Table,scope
From: https://www.cnblogs.com/mahmud/p/16871248.html

相关文章

  • 项目中使用ElementUI的Form 组件
    使用ElementUI的Form组件(1)首先必须是项目中安装ElementUI库(2)引入Vue的项目中(3)引入对应的组件名称并且全局注册ElementUI安装npmielement-ui-S引入Element......
  • elementUI table 数组中各项加逗号隔开
    js处理//this.newTableData数组this.newTableData.map((item,index)=>{//item.label数组if(item.label){......
  • elementUI table 第一列值相等合并
    效果如下: 首先:在table上加:span-method="spanMethod"   其次:methods中加两个方法dataPretreatment(){ //表格数据列合并预处理,生成一个与行数相同的数......
  • ElementUI侧边栏展开隐藏折叠功能
    一般后台管理项目中无论是ElementUI或Iview轻量UI框架都有很多组件来实现功能我们需要实现的是这样子的:在源代码里左侧菜单之前添加一个div,类名为“toggle-button”,然......
  • 实验2:Open vSwitch虚拟交换机实践
    实验2:OpenvSwitch虚拟交换机实践一、实验目的1.能够对OpenvSwitch进行基本操作;2.能够通过命令行终端使用OVS命令操作OpenvSwitch交换机,管理流表;3.能够通过Mininet的Pyt......
  • ElementUI的左侧菜单栏的小问题~~
    Vue后台管理的项目中使用了ElementUI的组件库。左侧菜单栏遇到了一些小问题,结果一步一步的解决了~~1,首先菜单栏的图标Icon不满足我们的需求,我们可以引入公司内部的样式ic......
  • 实验2:Open vSwitch虚拟交换机实践
     实验2:OpenvSwitch虚拟交换机实践 一、实验目的 能够对OpenvSwitch进行基本操作;能够通过命令行终端使用OVS命令操作OpenvSwitch交换机,管理流表;能够通过Minin......
  • 实验2:Open vSwitch虚拟交换机实践
    一、基础要求a)/home/用户名/学号/lab2/目录下执行ovs-vsctlshow命令、以及p0和p1连通性测试的执行结果截图b)/home/用户名/学号/lab2/目录下开启MininetCLI并执行......
  • 实验2:Open vSwitch虚拟交换机实践
    实验2:OpenvSwitch虚拟交换机实践一、实验目的能够对OpenvSwitch进行基本操作;能够通过命令行终端使用OVS命令操作OpenvSwitch交换机,管理流表;能够通过Mininet的Pytho......
  • 实验2:Open vSwitch虚拟交换机实践
    (一)基本要求1.ovs-vsctl基础操作实践:创建OVS交换机,以ovs-xxxxxxxxx命名,其中xxxxxxxxx为本人学号。在创建的交换机上增加端口p0和p1,设置p0的端口号为100,p1的端口号为101,类型......