笔记：iview-UI Table 自定义显示

场景：刚刚接到需求，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>