iview表格中如何渲染开关和按钮，以及给开关默认值
效果如下图所示
文章图片
image.png HTML代码如下：
首先考虑的是
render，代码如下，其中params.row.state就是指表格中每行中的state中的值，相当于你可以理解为这个render是自带表格的行数循环的：columns:[
{
title: '最近登录时间',
width: 80,
key: 'loginTime',
align: 'center',
},
{
title:'状态',
key:'action',
align: 'center',
render: (h, params) => {
return h('div', [
h('i-switch', {
props: {
value:params.row.state,
},
style: {
marginRight: '5px'
},
on: {
'on-change': (value) => {//触发事件是on-change,用双引号括起来，
//参数value是回调值，并没有使用到
// this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
}
}
}, ),
]);
}
},
{
title:'操作',
width: 200,
key:'action',
align: 'center',
render: (h, params) => {
return h('div', [
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.detailModal=true;
}
}
}, '编辑'),
h('Button', {
props: {
type: 'error',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
this.remove(params.index)
}
}
}, '重置密码'),
]);
}
},
],
【iview表格中如何渲染开关和按钮，以及给开关默认值】在
list中写入值，代码如下： list:[
{
loginTime:'2016-8-6',
state:false,
},
{
loginTime:'2016-8-6',
state:false,
},
{
loginTime:'2016-8-6',
state:true,
}
]
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 异地恋中，逐渐适应一个人到底意味着什么（）
- 我眼中的佛系经纪人
- 《魔法科高中的劣等生》第26卷（Invasion篇）发售
- “成长”读书社群招募
- 2020-04-07vue中Axios的封装和API接口的管理