iview table裡的render的一些資料格式
阿新 • • 發佈:2018-12-19
{ title:'操作', align: 'center', width:120, render:(h,params)=>{ return h('div',[ h('span', { style:{ 'margin-right':'10px', 'color':'#2d8cf0', 'cursor':'pointer' }, on: { click: () => { this.edit(params.row.id) } } },'編輯'), h('span', { style:{ 'color':'#2d8cf0', 'cursor':'pointer' }, on: { click: () => { this.delete(params.row.id,params.row.accountName) } } },'刪除') ]) }
Button
{ title: '操作', align: 'center', render:(h,params)=>{ return h('div',[ h('Button', { props: { type: 'primary', }, style:{ 'margin-right':'5px' }, on: { click: () => { this.edit(params.row.id) } } },'編輯'), h('Button', { props: { type: 'primary', }, on: { click: () => { this.delete(params.row.id) } } },'刪除') ]) } }
switch
{ title: '狀態', width:60, align: 'center', render:(h,params)=>{ return h('div',[ h('i-switch', { props: { type: 'primary', value: true //控制開關的開啟或關閉狀態,官網文件屬性是value }, style: { //display: params.index !== 0 ? 'none' : 'inline' }, on: { 'on-change': (value) => {//觸發事件是on-change,用雙引號括起來, //引數value是回撥值,並沒有使用到 this.switch(params.index) //params.index是拿到table的行序列,可以取到對應的表格值 } } }) ]) } }
checkbox
{
title: '是否啟用',
align: 'center',
width:200,
key:'flag',
render:(h,params)=>{
const row = params.row;
const flagVal = row.flag
return h('div',[
h('Checkbox', {
props: {
value: flagVal ,
},
on:{
'on-change': () =>{
alert(1);
}
}
})
])
}
},
對資料進行操作