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') ]) } } ]