Vue table的column属性，render函数生成switch开关和button按钮

• Z时代
• 2024-01-10
• 分类：综合

 dataList_table_column() {
      return [
        {
          type: 'selection',
          width: 66,
          align: 'center',
        },
        {
          title: '编号',
          align: 'center',
          type: 'index',
          minWidth: 80,
        },
        {
          title: "业务类型名称",
          key: "businessName",
          tooltip: true,          //鼠标悬停提示
          minWidth: 150,
        },
        {
          title: "最后修改时间",
          key: "updateTime",
          minWidth: 200,
        },{
          title: '开关状态',
          key: 'status',
          minWidth: 80,
render: (h, params) => {
            if (!params.row.default) {
              return h('i-switch', {
                props: {
                  size: 'large',
                  value: params.row.status,
                  trueValue:'true',
                  falseValue: 'false',
                  beforeChange: ()=>{
                    this.toggleStatus(params.row);
                  }
                },
                attrs: {
                  disabled: !this.permission[ `/content/bussinessType/toggleStatus` ],
                },
              }, [
                h('span', { slot: 'open' }, '启用'),
                h('span', { slot: 'close' }, '禁用'),
              ]);
            }
          },
        },
        {
          title: '操作',
          key: "action",
          width: 150,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            const arr = [
              h(
                 "Button",
                {
                  props: {
                    type: "text",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.edit(params.row);
                    }
                  }
                },
                "编辑"
              ),
              h(
                 "Button",
                {
                  props: {
                    type: "text",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.del(params.row);
                    }
                  }
                },
                "删除"
              )
            ];
            return h("div", arr);
          }
        }
      ];
    },

以上是 Vue table的column属性，render函数生成switch开关和button按钮 的全部内容， 来源链接： utcz.com/z/380136.html