element-ui中input，radio使用。传值和交互

备份学习和工作中遇见的内容，欢迎大佬指导

element-ui中弹窗使用

其中 $msgbox 的内容改写。

此处添加了input框和input中的radio。

 

//获取值或者给空值
this.teanantId = ''
this.tenantName = ''
this.tenantUrl = ''
this.status = ''
this.statusclickTr = row.status  == 1? true:false

//弹窗建立h
const h = this.$createElement;
//input框单独拿出来写
const objTenantName = h('input', {
   'style': { 'width': '70%','margin': '10px 10px'},
   'attrs': { 'value': this.tenantName },
   'on': {
       input: function(event) {
            this.tenantName = event.target.value
       }.bind(this)
    }
}, '')
//input框单独拿出来写
      const objtenantUrl = h('input', {
        'style': { 'width': '70%','margin': '10px 10px' },
        'attrs': { 'value': this.tenantUrl },
        'on': {
          input: function(event) {
            this.tenantUrl = event.target.value
          }.bind(this)
        }
      }, '')
//input中radio单独拿出来写
      const objstatusTr = h('input', {
        'style': { 'margin': '10px 10px' },
        'attrs': {
          "name":"statusR",
          "type": "radio" ,
          'value': 1,
          "checked": this.statusclickTr
        },
        'on': {
          click: function(event) {
            this.status = event.target.value
          }.bind(this)
        }
      }, '')
      const objstatusFa = h('input', {
        'style': { 'margin': '10px 10px' },
        'attrs': {
          "name":"statusR",
          "type": "radio" ,
          'value': 0,
          "checked": !this.statusclickTr
        },
        'on': {
          click: function(event) {
            console.log(event.target.value);
          }
        }
      }, '')


//弹窗msgbox改写
this.$msgbox({
        title: '修改',
        //主要修改部分
        message: h('p', null, [
          h('span', {  style: 'padding: 10px;' }, '名称'),
          objTenantName,
          h('span', {  style: 'padding: 10px' }, '链接'),
          objtenantUrl,
          h('span', {  style: 'padding: 10px;' }, '状态'),
          objstatusTr,"启用",
          objstatusFa,"禁用",
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        beforeClose: (action, instance, done) => {
            //在关闭弹窗之前，当点确定时进行的操作
            //此处status后端传给的是0或1
            if(this.status == 1){
              this.status = '1'
            }else{
              this.status = '0'
            }

            //按钮名字改写和加载中
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = '执行中...';
            
            //axios获取后端传值
            axios({
              headers: {
                token: '',
                "Content-Type": "application/json; charset=utf-8",
              },
              url: "",
              method: "post",
              data: {
                
              },
            }).then((response) => {
              console.log(response);
              //拿到值之后进行想要的操作
              if (response.status == 200) {
                this.$message({
                  type: 'success',
                  message: '修改成功'
                })

                //关闭弹窗
                done()
                instance.confirmButtonLoading = false
              }
            });
          } else {
            done();
          }
        }
      }).then(action => {
        // this.$message({
        //   type: 'info',
        //   message: 'action: ' + action
        // });
      }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消修改'
          });
      });