美文网首页
在element UI 和 iView中render函数使用Sw

在element UI 和 iView中render函数使用Sw

作者: CoolBoy_52e5 | 来源:发表于2021-10-27 17:12 被阅读0次
    • 使用element UI
    // 方法 1:
    render: (h, params) => {
      return h("el-switch", {
        props: {
          value: params.row.status,
          "active-text": "开启",
          "inactive-text": "停用",
          "active-value": 1,
          "inactive-value": 0,
        },
        on: {
          change: (value) => {
            params.row.status = params.row.status == 1 ? 0 : 1;
          },
        },
      });
    },
    
    // 方法 2:
    render: (h, params) => {
      return [
        <el-switch
          value={params.row.hidden}
          active-value={1}
          inactive-value={0}
          active-color={"#009A88"}
          inactive-color={"#CCCCCC"}
          on-change={e => {
            this.onStatus(params.row);
          }}
        ></el-switch>,
      ];
    },
    // or
    render: (h, params) => {
      return (
        <el-switch
          value={params.row.hidden}
          active-value={1}
          inactive-value={0}
          onChange={() => this.onStatus(params.row)}
        ></el-switch>
      );
    },
    
    • 使用iview
    render: (h, params) => {
      return h("i-switch", {
        props: {
          value: params.row.status,
          size: "large",
        },
        on: {
          "on-change": (value) => {
            params.row.status = params.row.status == 1 ? 0 : 1;
          },
        },
        scopedSlots: {
          open: () => h("span", "开启"),
          close: () => h("span", "停用"),
        },
      });
    
    • 使用el-select 远程搜索
    render: (h, params) => {
      return [
        <el-select
          v-model={params.row.rawMaterialName}
          filterable
          remote
          reserve-keyword
          placeholder="请输入名称"
          remote-method={this.remoteMethod}
          loading={this.loading}
          on-change={e => {
            this.onStatus(this.$event, params.row);
          }}
        >
          {this.options.map((item, i) => {
            return <el-option key={i} label={item.label} value={item.value}></el-option>;
          })}
        </el-select>,
      ];
    },
    

    相关文章

      网友评论

          本文标题:在element UI 和 iView中render函数使用Sw

          本文链接:https://www.haomeiwen.com/subject/ojepaltx.html