虽说实现下面的效果,用eldialog很轻松就能搞定。但是这种简单交互,我更喜欢使用MessageBox
话不多说,直接代码~

在这里插入图片描述

<el-button  type="primary" size="mini" @click="handleApply()" >处理申请</el-button>
handleApply() {
      const h = this.$createElement;
      let _this = this;
      _this.statu = '1';
      if (document.getElementById('radio1')) {
        // 默认按钮选中同意,否则下次打开对话框按钮值为上次选中的值
        document.getElementById('radio1').checked = true;
      }
      this.$msgbox({
        title: '提示',
        message:
          h('div', null, [
            h('span', null, '是否同意撤回申请: '),
            h('span', {
              style: {
                marginRight: '20px'
              }
            },
              [h('input', {
                style: {
                  cursor: 'pointer',
                },
                attrs: {
                  // 添加属性
                  type: "radio",
                  name: "Radio",
                  value: "1",
                  id: "radio1",
                  checked: _this.statu === '1',
                },
                on: {
                  change: () => {
                    _this.statu = '1'
                  }
                }
              }, []), h('span', {
                class: 'el-radio__label',
              }, `同意`)]),
            h('span', null,
              [h('input', {
                style: {
                  cursor: 'pointer',
                },
                attrs: {
                  type: "radio",
                  name: "Radio",
                  value: "0",
                  id: "radio2",
                  checked: _this.statu === '0',
                },
                on: {
                  change: () => {
                    _this.statu = '0'
                  }
                }
              }, []), h('span', { class: 'el-radio__label' }, `不同`)]),
          ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(action => {
          axios.$post(
            `/xxx/xxxxx/${_this.statu}`
          ).then((res) => {
            if (res.success) {
              this.$message.success("操作成功");
            }
          });
      })
    },
if (document.getElementById('radio1')) {
    // 默认按钮选中同意,否则下次打开对话框按钮值为上次选中的值
    document.getElementById('radio1').checked = true;
  }

可能实现的不够完美,欢迎指正与补充。

原文地址:https://blog.csdn.net/m0_48276047/article/details/134335254

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_43468.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注