场景：刚刚接到需求，table编辑区域根据不同数据的属性 编辑区域的内容是不一样的 ，这样就和传统的编辑写法不一样了。
如图：
PS：每一行根据数据不同显示不同的操作内容。
代码👇：注意主要看👉👈
<script>
export default {
components: {
editChannel,
editDevice,
lantset,
openCloudStorage,
},
data() {
return {
columns:[
{
title: "操作",
align: "center",
width: 300,
key: "handle",
render: (h, params) => {
//👉这里可以写判断逻辑 根据params可以获取当前行的数据👈
return h("div", [
params.row.dtype == 3
? h(
"Button",
{
props: {
// code: "cscp.user.edit",
type: "default",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.$router.push({
name: "channelWatch",
params: { id: params.row.id },
});
},
},
},
"查看"
)
: h(
"Button",
{
props: {
// code: "cscp.user.edit",
type: "primary",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.$router.push({
name: "deviceWatch",
params: {
id: params.row.id,
domainid: params.row.domainid,
},
});
},
},
},
"查看"
),
params.row.dtype == 3
? h(
"Button",
{
props: {
// code: "cscp.user.edit",
type: "default",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.aditeChannelOpen = true;
this.id = String(params.row.id);
this.platformname = params.row.platformname;
},
},
},
"编辑"
)
: h(
"Button",
{
props: {
// code: "cscp.user.edit",
type: "primary",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.aditeDeviceOpen = true;
this.id = String(params.row.id);
this.platformname = params.row.platformname;
},
},
},
"编辑"
),
params.row.dtype == 3
? h(
"Button",
{
props: {
type: "default",
size: "small",
},
style: {
marginRight: "5px",
},
on: {
click: () => {
this.cloudData = params.row;
this.CloudOpen = true;
},
},
},
"******"
)
: null,
h(
"Dropdown",
{
props: {
transfer: true,
trigger: "click",
},
},
[
h(
"Button",
{
props: {
type: "warning",
size: "small",
},
},
"更多"
),
]
),
]);
},
},
]
}
};
</script>
