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


     dataList_table_column() {
          return [
            {
              type: 'selection',
               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",
               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);
              }
            }
          ];
        },
  • 相关阅读:
    fixed与sticky的区别
    自我介绍以及web课程目标
    DOM&BOM
    web中常用单位的使用
    Oracle 使用 DBLINK详解(转载) 挪威
    Sql server 无法删除用户的处理办法(转载) 挪威
    ICMP类型
    makefile笔记
    [笔记]Makefile wildcard
    在Visual Studio 2005下配置WinPcap开发环境
  • 原文地址:https://www.cnblogs.com/ysx215/p/14990622.html
Copyright © 2020-2023  润新知