说明
表格内内嵌相关的组件标签一般是刚需的需求，如官网示例中的表格内内嵌Button的示例。
但是有些时候我们需要渲染其他复杂的组件的话，就需要深入了解一下相关render属性。
以下是部分的示例：
1.单元格内嵌图片展示：
image.png
{
title: 'bannel图',
key: 'pic_bannel',
align: 'center',
width: 100,
render: (h, params) => {
return h('div', [
h('img', {
attrs: {
src: params.row.pic_bannel
},
style: {
width: '40px',
height: '40px'
},
on: {
click: () => {
// this.userEdit(params.row)
this.modal_see_tupian_image = params.row.pic_bannel
this.modal_see_tupian = true
}
}
}),
]);
}
}
2.单元格内嵌TAG标签：
image.png
{
title: '商品类型',
key: 'type',
align: 'center',
width: 120,
render: (h, params) => {
let re = "";
if (params.row.type === 0) {
return h("div", [
h(
"Tag",
{
props: {
color: "warning"
}
},
"虚拟物品"
)
]);
} else if (params.row.type === 1) {
return h("div", [
h(
"Tag",
{
props: {
color: "success"
}
},
"实体物品"
)
]);
}
}
},
优化判断逻辑：
{
title: '性别',
key: 'sex',
align: 'center',
width: 100,
render: (h, params) => {
return h("div", [
h(
"Tag",
{
props: {
color: params.row.sex === "1" ? "purple" : "blue"
}
},
params.row.sex === "1" ? "男" : "女"
)
]);
}
},
3.单元格内嵌Tooltip标签：
image.png
{
title: '商品描述',
key: 'describe',
align: 'center',
width: 200,
render: (h, params) => {
return h('Tooltip', {
props: {placement: 'bottom-end'}
}, [
params.row.describe,
h('span', {slot: 'content', style: {whiteSpace: 'normal', wordBreak: 'break-all'}}, params.row.describe)
])
}
}
4.单元格内嵌Poptip标签：
image.png
//这个参数很重要，影响到是否被遮挡的问题
Poptip中的 transfer: true,
{
title: '操作',
key: 'action',
width: 200,
// fixed: 'right',
align: 'center',
render: (h, params) => {
return h('div', [
// h('Button', {
// props: {
// type: 'primary',
// size: 'small'
// },
// style: {
// marginRight: '5px'
// },
// on: {
// click: () => {
// // this.goodsInfoList[params.row._index] = dsiasdh
// // console.log(this.goodsInfoList[params.row._index])
// // this.currgoodsInfoList = params.row
// //显示对应的对话框
// // this.edit_goods_info_modal = true
// }
// }
// }, '查看'),
h('Button', {
props: {
type: 'primary',
size: 'small'
},
style: {
marginRight: '5px'
},
on: {
click: () => {
// this.userEdit(params.row)
//赋值当前选择的实体对象
this.currgoodsInfoList = params.row
this.currgoodsInfoList_index = params.row._index
//拷贝一份对象，不影响原来的值
this.copy_currgoodsInfoList = Object.assign({}, params.row);
// this.currgoodsInfoList_is_enable = this.currgoodsInfoList.is_enable
// this.currgoodsInfoList_is_lower = this.currgoodsInfoList.is_lower
// this.currgoodsInfoList_type = this.currgoodsInfoList.type
// this.currgoodsInfoList_tag= this.currgoodsInfoList.tag
//显示对应的对话框
this.edit_goods_info_modal = true
}
}
}, '修改'),
//弹窗层-包含按钮
h('Poptip', {
props: {
//这个参数很重要，影响到是否被遮挡的问题
transfer: true,
// placement: 'bottom',
confirm: true,
title: '你确定要删除吗?'
},
on: {
'on-ok': () => {
console.log(" 点击了确定删除！！！！")
this.deleteGoodsinfo()
// vm.$emit('on-delete', params)
// vm.$emit('input', params.tableData.filter((item, index) => index !== params.row.initRowIndex))
}
}
}, [
h('Button', {
props: {
type: 'error',
size: 'small'
},
on: {
click: () => {
// this.deleteUser(params.row.USER_ID)
}
}
}, '删除')
])
]);
}
5.单元格内嵌Avatar组件：
image.png
{
title: '用户头像',
key: 'avatar_url',
align: 'center',
width: 100,
render: (h, params) => {
return h("Avatar", {
props: {
src: params.row.avatar_url
}
});
}
}
6.单元格内嵌Switch组件：
image.png
代码还可以简化一下：
根据params.row.is_enable设置switch的值就可以！
{
title: '用户状态',
key: 'is_enable',
align: 'center',
width: 190,
render: (h, params) => {
if (params.row.is_enable === 1) {
return h("div", [
h(
"Tag",
{
props: {
color: "green"
}
},
"正常中"
),
h('i-switch', { //数据库1是已处理，0是未处理
props: {
size:'large',
type: 'primary',
value: false //控制开关的打开或关闭状态，官网文档属性是value
},
scopedSlots: {
open: () => h('span', '开启'),
close: () => h('span', '禁用'),
},
style: {
marginRight: '5px'
},
on: {
'on-change': (value) => {//触发事件是on-change,用双引号括起来，
//参数value是回调值，并没有使用到
// this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
this.usersInfoList[params.index].is_enable = 0
}
}
},)
]);
} else if (params.row.is_enable === 0) {
return h("div", [
h(
"Tag",
{
props: {
color: "red"
}
},
"已禁用"
),
h('i-switch', { //数据库1是已处理，0是未处理
props: {
size:'large',
type: 'primary',
value: true
},
scopedSlots: {
open: () => h('span', '开启'),
close: () => h('span', '禁用'),
},
style: {
marginRight: '5px'
},
on: {
'on-change': (value) => {//触发事件是on-change,用双引号括起来，
//参数value是回调值，并没有使用到
// this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
this.usersInfoList[params.index].is_enable = 1
}
}
},)
]);
}
代码判断优化：
{
title: '用户状态',
key: 'is_enable',
align: 'center',
width: 190,
render: (h, params) => {
return h("div", [
h(
"Tag",
{
props: {
color: params.row.is_enable === 1 ? "green" : "red"
}
},
params.row.is_enable === 1 ? "正常中" : "已禁用"
),
h('i-switch', { //数据库1是已处理，0是未处理
props: {
size: 'large',
type: 'primary',
value: params.row.is_enable === 1 ? false : true//控制开关的打开或关闭状态，官网文档属性是value
},
scopedSlots: {
open: () => h('span', '开启'),
close: () => h('span', '禁用'),
},
style: {
marginRight: '5px'
},
on: {
'on-change': (value) => {//触发事件是on-change,用双引号括起来，
//参数value是回调值，并没有使用到
// this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
if (value) {
params.row.is_enable = 0
} else {
params.row.is_enable = 1
}
}
}
},)
]);
}
},
