iview table换行_iview—Table表格render 渲染

const that = this

this.columns =[

{//1.序号

type: 'index',

title :'序号',

width:50,

align:'center'},

{//2.if判断、a标签

title: '操作',

key:'action',

align:'center',

fixed:'left',

width:80,

render: (h, params)=>{if (this.dataList[params.index].isRptEdit=='1') {//主项和在报告录入环节的不可取消选择

return h('span', '/');

}else{return h('div', [

h('a', {

style: {

color:'blue'},

on: {

click: ()=>{this.unsel(params);

}

}

},'取消选择')

])

}

}

},

{//3.if判断、Input输入

title: '项目名称',

key:'itemname',

width :'200',

render: (h, params)=>{if (this.dataList[params.index].isRptEdit=='1') {//在报告录入环节的不可编辑

return h('span', {

style: {

color:'#c5c8ce'}

}, params.row.itemname);

}else{return h('Input', {

props: {

type:'text',

size :'small',

value:this.dataList[params.index].itemname

},

on: {'on-blur': (event) =>{

that.dataList[params.index].itemname=event.target.value;

}

}

},'')

}

}

},

{//4.renderHeader自定义列头的点击事件、render的Input点击事件(nativeOn click)

title: '报告录入人员',

key:'rpteditor',

width :'150',

renderHeader : (h, params)=>{return h('div',[

h('a',{

style : {

color:'blue'},

on : {

click: ()=> { //自定义列头的点击事件

this.editMode = 'batch';this.personKey = 'rpteditor'

this.showSelPerson = true;

}

}

},params.column.title)

])

},

render: (h, params)=>{

const row=params.row;return h('Input', {

props: {

type:'text',

size :'small',

readonly:true,

value:this.dataList[params.index].rpteditor

},

nativeOn: {

click: ()=>{this.editMode = 'one';this.currentRowId =params.index;this.personKey = 'rpteditor'

this.showSelPerson = true;

}

}

},'');

}

},

{//5.正常列

title: '当前处理人',

key:'currentHandler',

width :'120'},

{//6.按钮Button

title: '操作',

key:'action',

align:'center',

width:155,

render: (h, params)=>{return h('div', [

h('Button', {

props: {

size:'small'},

style: {

marginRight:'5px',

fontSize:'12px',

borderColor:'#5cadff'},

on: {

click: ()=>{this.upRow(params)

}

}

},'上移'),

h('Button', {

props: {

size:'small'},

style: {

marginRight:'5px',

fontSize:'12px',

borderColor:'#5cadff'},

on: {

click: ()=>{this.downRow(params)

}

}

},'下移'),

h('Button', {

props: {

size:'small'},

style: {

marginRight:'5px',

fontSize:'12px',

borderColor:'#5cadff'},

on: {

click: ()=>{this.delRow(params)

}

}

},'删除')

])

}

},

{//7.复选框Checkbox

title: '主项',

key:'must',

width :'50',

align:'center',

render: (h, params)=>{return h('Checkbox', {

props: {

size :'small',

value:this.dataList[params.index].must

},

on: {'on-change': (e) =>{this.dataList[params.index].must =e

}

}

},'')

}

},

{//8.下拉框Select(遍历list生成选择项)

title: '文书项目名称',

key:'itemname',

width :'200',

render: (h, params)=>{return h('Select', {

props: {

value:this.dataList[params.index].itemname, //获取选择的下拉框的值

size: 'small'},

on: {'on-change': e =>{this.dataList[params.index].itemname = e //改变下拉框赋值

}

}

},this.productTypeList.map((item) => { //this.productTypeList下拉框里的data

return h('Option', { //下拉框的值

props: {

value: item.id,

label: item.name

}

})

}))

}

},

{//9.下拉框Select(枚举生成选择项)

title: '文书项目名称',

key:'itemname',

width :'200',

render: (h, params)=>{return h('Select', {

props: {

value:this.dataList[params.index].itemname, //获取选择的下拉框的值

size: 'small'},

on: {'on-change': e =>{this.dataList[params.index].itemname = e //改变下拉框赋值

}

}

},

[

h('Option',{

props: {

value:'1'}

},'option1'),

h('Option',{

props: {

value:'2'}

},'option2')

])

}

}

]