vue-iView框架-Table中嵌入输入框、下拉框等
{
key: 'name',
renderHeader: (h) => {
return h('div', [
h(
'span',
{
style: {
color: 'red',
},
class: 'mr-5',
},
'*'
),
h('span', '步骤名称'),
]);
},
render: (h, params) => {
return h('Input', {
props: {
value: params.row.name,
maxlength: '50',
showWordLimit: true,
},
on: {
input: (val) => {
this.tableList[params.index].name = val;
},
},
});
},
},
{
key: 'behavior',
renderHeader: (h) => {
return h('div', [
h(
'span',
{
style: {
color: 'red',
},
class: 'mr-5',
},
'*'
),
h('span', '选择行为'),
]);
},
render: (h, params) => {
if (params.row.handleActionId === '2') {
return h('div', [
h(
'Select',
{
props: {
transfer: true,
value: params.row.handleActionId,
},
on: {
'on-change': (event) => {
this.tableList[params.index].handleActionId = event;
},
},
},
this.behaviorList.map((item) => {
return h('Option', {
props: {
value: item.id,
label: item.name,
},
});
})
),
h(
'Select',
{
props: {
transfer: true,
placeholder: '请选择报表',
value: params.row.formId,
},
class: 'mt-10',
on: {
'on-change': (event) => {
this.tableList[params.index].formId = event;
},
},
},
this.reportList.map((item) => {
return h('Option', {
props: {
value: item.id,
label: item.content,
},
});
})
),
]);
} else {
return h(
'Select',
{
props: {
transfer: true,
value: params.row.handleActionId,
},
on: {
'on-change': (event) => {
this.tableList[params.index].handleActionId = event;
},
},
},
this.behaviorList.map((item) => {
return h('Option', {
props: {
value: item.id,
label: item.name,
},
});
})
);
}
},
},
{
title: '是否允许重复',
key: 'isAgain',
render: (h, params) => {
return h(
'i-switch',
{
props: {
value: params.row.canRepeat,
},
on: {
'on-change': (event) => {
this.tableList[params.index].canRepeat = event;
},
},
},
[
h('span', { props: { slot: 'open' } }, '是'),
h('span', { props: { slot: 'close' } }, '否'),
]
);
},
},
菜鸟自己的小记录,如有错请大佬纠错

浙公网安备 33010602011771号