基本操作
{
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: '状态',
width:60,
align: 'center',
render:(h,params)=>{
return h('div',[
h('i-switch', {
props: {
type: 'primary',
value: true //控制开关的打开或关闭状态，官网文档属性是value
},
style: {
//display: params.index !== 0 ? 'none' : 'inline'
},
on: {
'on-change': (value) => {//触发事件是on-change,用双引号括起来，
//参数value是回调值，并没有使用到
this.switch(params.index) //params.index是拿到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);
}
}
})
])
}
},对数据进行操作
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')]
);
},
实现动态改变option的内容，与组件的data结合
直接上代码，在数组的地方写入：
this.volumeTypes.map(function(type){
return h('Option', {
props: {value: type}
}, type);
})
其中，this.volumeTypes就是我们的列数据，当然，这是最基本的绑定的写法，如果想使用对象数组，自行研究，很easy的~
这是我们的最终结果：
{
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
toolTip里的卡槽slot,应放到props同级
props: {},
slot: ‘’h('Tooltip',{
props: {
placement:'bottom',
content:'tishi'
},
},[h('Icon',{
props:{
type:'ios-information'
},
class:'font-red'
}),
h('div',{
slot: 'content'
},[
h('p', {class:'tc'}, '提示：'),
h('p', '系统内置角色不允许删除')
]
)
]
);日期
{
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) {
params.row.darkStartTime = e;
} else {
params.row.planDateFrom = ''; // 必须有各种判断，否则清空时无法解除之前的禁用
}
}
}
})
])
}
}TimePicker
{
title: '夜间服务结束时间',
key: 'darkEndTime',
align: 'center',
render: (h, params) => {
return h('div', [
h('TimePicker', {
props: {
format: 'HH:mm',
placeholder: '选择夜间服务开始时间',
transfer: true,
value: params.row.darkEndTime
},
on: {
'on-change': e => {
if (e) {
params.row.darkEndTime = e;
} else {
params.row.darkEndTime = ''; // 必须有各种判断，否则清空时无法解除之前的禁用
}
}
}
})
])
}
}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("Input", {
props: {
value: params.row.money,
type: "number"
},
on: {
"on-change"(event) {
params.row.money = event.target.value; // 这里对input的数据双向绑定
},
"on-enter": () => {
console.log('回车事件');
}
}
}
})a标签
render: (h, params) => {
//return h(‘定义的元素‘,{‘元素的性质‘},‘元素的内容‘);
let url = ‘访问的地址‘
return h(‘a‘, {
attrs: {
href: url,*
target: ‘_black‘
}
}, params.row.address)；
}*