1.序号
2.if判断、a标签
3.if判断、Input输入
4.renderHeader自定义列头的点击事件、render的Input点击事件(nativeOn click)
5.正常列
6.按钮Button
7.复选框Checkbox
8.下拉框Select(遍历list生成选择项)
9.下拉框Select(枚举生成选择项)
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')
])
}
}
]