iview要实现table可编辑,使用render函数进行渲染,非常简单,希望对大家有所帮助。
一、效果图如下:
二、render函数使用方法
- h: vue Render函数的别名(全名 createElement)即 Render函数
- params: table 该行内容的对象
- props:设置创建的标签对象的属性
- style:设置创建的标签对象的样式
- on:为创建的标签绑定事件
三、使用方法
//创建一个表格
<Table border :columns="columns" :data="tableData" height="700"></Table>
//data中定义columns
comColumns:[
//实现select
{
key: 'sclx',
title: '生产类型',
width: 120,
render: (h, params) => {
return h('Select', { //创建一个select下拉框
props:{ //定义select的属性
placeholder:'生产类型',
value:this.tableData[params.index].sclx //初始化给下拉框赋值
},
on: { //给select添加事件
'on-change':(event) => {
this.tableData[params.index].sclx = event; //选择option给value赋值
}
},
},
this.sclxList.map((type)=>{ //循环展示下拉框数据 this.sclxList是从后台获取到的数据
return h('Option', {
props:{
value:type.ywzfl,
label:type.zfllc
}
}, type);
})
)
}
},
//实现input
{
key: 'lxdh',
title: '联系电话',
width: 100,
render:(h,params)=>{
return h('Input',{
props:{
placeholder:'联系电话',
value:this.tableData[params.index].lxdh
},
on:{
'input':(val)=>{
this.tableData[params.index].lxdh = val;
}
}
})
}
},
//实现日期选择器
{
key: 'fhsj',
title: '发货时间',
width: 120,
render: (h, params) => {
return h('div',[
h('DatePicker',{
props:{
placeholder:'发货时间',
value:this.tableData[params.index].fhsj
},
on:{
'on-change':(date)=>{
this.tableData[params.index].fhsj = date;
this.tableData[params.index].isEdit = true;
}
}
})
]);
}
},
]