在element UI 和 iView中render函数使用Switch功能 , 使用 el-select

• 使用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>,
  ];
},