Basic Operations
{
title:'操作',
align: 'center',
width:120,
render:(h,params)=>{
return h('div',[
h('span', {
style:{
'margin-right':'10px',
'color':'#2d8cf0',
'cursor':'pointer'
},
on: {
click: () => {
this.edit(params.row.id)
}
}
},'编辑'),
h('span', {
style:{
'color':'#2d8cf0',
'cursor':'pointer'
},
on: {
click: () => {
this.delete(params.row.id,params.row.accountName)
}
}
},'删除')
])
}
Button
{
title: '操作',
align: 'center',
render:(h,params)=>{
return h('div',[
h('Button', {
props: {
type: 'primary',
},
style:{
'margin-right':'5px'
},
on: {
click: () => {
this.edit(params.row.id)
}
}
},'编辑'),
h('Button', {
props: {
type: 'primary',
},
on: {
click: () => {
this.delete(params.row.id)
}
}
},'删除')
])
}
}
switch
{
Title: 'status',
width: 60,
align = left:' Center ',
the render: (H, the params) => {
return H (' div ', [
H (' I-Switch ', {
The props: {
type:' Primary ',
value: // to true control switch open or closed state, a document properties official website value
},
style: {
// the display:! params.index == 0?' none ':' inline '
},
ON: {
'on-change': (value ) => {// trigger event is on-change, enclosed in double quotation marks,
// callback parameter value is the value, not used to
this.switch (params.index) // params .index get row sequence table may take a value corresponding to the table
}
}
})
])
}
}
checkbox
{
title: '是否启用',
align: 'center',
width:200,
key:'flag',
render:(h,params)=>{
const row = params.row;
const flagVal = row.flag
return h('div',[
h('Checkbox', {
props: {
value: flagVal ,
},
on:{
'on-change': () =>{
alert(1);
}
}
})
])
}
},Manipulate data
select
render: (h, params) => {
return h('Select', {
props:{
value: this.data[params.index].volumeType,
},
on: {
'on-change':(event) => {
this.data[params.index].volumeType = event;
}
},
},
[
h('Option',{
props: {
value: '1'
}
},'option1'),
h('Option',{
props: {
value: '2'
}
},'option2')]
);
},
Dynamic change option content, data binding component
Directly on the code, written in the local array:
this.volumeTypes.map(function(type){
return h('Option', {
props: {value: type}
}, type);
})
Which, this.volumeTypes is our column data, of course, this is the most basic binding wording, if you want to use an array of objects, self-study, it's easy -
This is our final result:
{
title: '卷类型',
key: 'volumeType',
align: 'center',
render: (h, params) => {
return h('Select', {
props:{
value: this.data[params.index].volumeType,
},
on: {
'on-change':(value) => {
this.data[params.index].volumeType = value;
}
},
},
this.volumeTypes.map(function(type){
return h('Option', {
props: {value: type}
}, type);
})
);
},
},
{
title: '服务项目',
align: 'center',
key: 'categoryId',
render: (h, params) => {
let row = params.row
let optionArr = []
row.allType.forEach(item => {
optionArr.push(h('Option',{
props: {
value: item.categoryId
}
}, item.categoryName))
})
return h('Select', {
props:{
value: row.categoryId,
},
on: {
'on-change':(event) => {
row.categoryId = event
}
},
}, optionArr)
}
}slot
the toolTip slot in the slot, should be placed at the same level props
props: {},
slot: ''H ( 'Tooltip', {
The props: {
Placement: 'bottom',
Content: 'tishi '
},
}, [H ( 'Icon', {
The props: {
type: 'iOS-Information'
},
class: 'font- Red '
}),
H (' div ', {
slot:' Content '
}, [
H (' P ', {class:' TC '},' Tip: '),
H (' P ',' system built roles not allowed to delete ')
]
)
]
);date
{
title: '夜间服务开始时间',
key: 'darkStartTime',
align: 'center',
render: (h, params) => {
return h('div', [
h('DatePicker', {
props: {
type: 'datetime',
format: 'yyyy-MM-dd HH:mm:ss',
placeholder: '选择夜间服务开始时间',
transfer: true,
value: params.row.darkStartTime
},
options: {
disabledDate: (date) => {
if (params.row.darkStartTime) {
return date && date.valueOf() > new Date(params.row.darkStartTime).valueOf()
};
if (!params.row.darkStartTime) {
return false
}
}
},
on: {
'on-change': e => {
if (e) {
E = params.row.darkStartTime;
} the else {
params.row.planDateFrom = ''; // must have various determinations, or can not be released before emptying the disabled
}
}
}
})
])
}
}TimePicker
{
Title: 'night service end time',
Key: 'darkEndTime',
align = left: 'Center',
the render: (H, the params) => {
return H ( 'div', [
H ( 'TimePicker', {
The props: {
the format: 'HH: mm',
placeholder: 'select night service start time',
Transfer: to true,
value: params.row.darkEndTime
},
ON: {
'ON-Change': E => {
IF (E) {
the params E = .row.darkEndTime;
} the else {
params.row.darkEndTime = ''; // must have various determinations, or can not be released before emptying the disabled
}
}
}
})
])
}
}inputNumber
{
title: '退货数量',
key: 'curQuantity',
align: 'center',
render: (h, params) => {
let child = h('InputNumber', {
props: {
min: 1,
max: params.row.maxQuantity,
value: params.row.curQuantity,
'active-change': false
},
on: {
'on-change': (value) => {
params.row.curQuantity = value
bus.$emit("onChangeQuan", {row: params.row, index: params.index})
}
}
})
if (params.index == 0) {
return h('div', [child])
} else {
return h('div', params.row.maxQuantity)
}
}
}
mounted() {
this.$bus.$on("onChangeQuan",({row, index}) => this.onChangeQuan(row, index));
},
onChangeQuan(row, index) {
this.list.data[index] = row;
},input
H ( "the Input", {
The props: {
value: params.row.money,
type: "Number"
},
ON: {
"ON-Change" (Event) {
params.row.money = event.target.value; / / where the data input of the two-way binding
},
"oN-Enter": () => {
the console.log ( 'Enter event');
}
}
}
})a label
render: (h, params) => {
// return h ({ 'properties of the elements'} 'elements defined', 'the content of the element');
let url = 'address accessible'
return H ( 'A', {
attrs: {
the href: URL, *
target: '_black'
}
}, params.row.address);
} *