vue iview render函數生成switch開關

iview table render集成switch開關修改table表格的值。既可以綁定默認的on-change事件(on)，也可以綁定自定義click事件(nativeOn)。

一、效果如下：

即是打開處理switch開關，發布狀態改為上架狀態，關閉switch開關，發布狀態改為下架狀態。

二、template html寫法：

<Table border :columns="dataList_table_column" :data="dataList" :loading="loading.table"></Table>

三、computed寫法，table render函數寫法：

dataList_table_column(){
      return [
         ...
         {
          title: '發布狀態',
          key: 'status',
          width: 130,
          fixed: "right",
          align: "center",
          render: (h, params) => {
            return h('i-switch', {
              props: {
                size: 'large',
                value: params.row.avatarStatus ? true : false,
                disabled: true,
              },
              // on: {
              //   'on-change': (val) => {
              //     this.toggleStatus(val,params.row);
              //   },
              // },
 nativeOn: { click: () => { this.toggleStatus(params.row); }, }
            }, [
              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.showImageModal(params.row);
                    }
                  }
                },
                "詳情"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "text",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.del(params.row);
                    }
                  }
                },
                "刪除"
              )
            ];
            return h("div", arr);
          }
        }
      ]
}

四、methods方法:

toggleStatus(row){
      let params = {
        avatarStatus:row.avatarStatus === 1 ? 0 : 1,
        id:row.id
      }
      let content = row.avatarStatus ? '是否確認下架' : '是否確認上架';
      this.$Modal.confirm({
        title: '發布狀態確認',
        content: `<p style="text-align:center; padding:10px 0;margin-left: -40px;">${content}</p>`,
        // okText: '確認',
        // cancelText: '取消',
        onOk: () => {
          this.$axios._api_xxx.put('xxxxxxx',params)
          .then(res=>{
            let result = res.data;
            if (result.code === '000000') {
              this.$Notice.success({
                title: '修改成功'
              })
            } else {
              this.$Notice.error({
                title: '修改失敗，'+ data.description
              })
            }
            this.getDataList('search');
          }, err => {
            console.log(err);
          })
        },
        onCancel: () => {}
      });
    }

 

五、CSS樣式：

/deep/.ivu-table-cell{
  text-align: center !important;
}
/deep/ .ivu-switch {
  opacity: 1;
  cursor: pointer;
}

/deep/ .ivu-switch:after {
  cursor: pointer;
}