判断按钮是否可以点击逻辑 vue element-ui

判断按钮是否可以点击逻辑
总体逻辑: 判断这个按钮是否可以点击。
1.定义数组接受所有选中行共同拥有的状态,如果所有选中行共同拥有的状态没有当前状态,
换句话说只要有一个没有。该按钮就可以点击this.availableBatchBtn()
2.具体进行判断 定义一个数组,循环当前选中行。将每一行的状态进行格式化后加入新数组,
返回一个_.intersection()的交集。返回一个共同拥有的状态
3.定义格式化函数。getBtnByStatus,对应的state,为对应的状态(为一个数组)。返回对应的
状态
原理:交集状态不存在即可点击
ex:
<el-button :disabled=“isShowBatchSend”
icon=“iconfont hy-delivery-o”
size=“mini”
title=“送审”
@click=“batchSend”>

一------------------------------------
判断送审按钮是否可以点击----isShowBatchSend函数
arr 为一个数组,这个数组中的内容是当前所有选中行都包含的状态
根据返回的数组交集部分。也就是arr是返回的所有状态的交际。查询是否包括当前按钮状态
如果这个按钮要变成的状态不包括在当前数组中。就可以点击 返回true
isShowBatchSend() {
let arr = this.availableBatchBtn();
return !arr.includes(STATUS.SEND);
}

二-------------------------------------
--------availableBatchBtn函数返回一个数组
1.定义空数组
2.循环当前选中的行。在循环中为这个加进每一行的状态判断。
3.返回每一行中都包含的值
4.格式化后的每一个state都加入了result这个数组,且每一个state格式化后也为一个数组,
解构数组,最终返回多个状态(数组)相同的交集状态部分。
availableBatchBtn() {
let result = [];
for (const item of this.selection) {
result.push(this.getBtnByStatus(item.status));
}
return _.intersection(…result);
}

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
当然可以!下面是一个简单的VueElement-UI实现的登录注册页面的代码示例: ```html <template> <div class="login-register"> <el-form ref="loginForm" :model="loginForm" label-width="80px"> <el-form-item label="用户名"> <el-input v-model="loginForm.username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" v-model="loginForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="login">登录</el-button> </el-form-item> </el-form> <el-form ref="registerForm" :model="registerForm" label-width="80px"> <el-form-item label="用户名"> <el-input v-model="registerForm.username"></el-input> </el-form-item> <el-form-item label="密码"> <el-input type="password" v-model="registerForm.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="register">注册</el-button> </el-form-item> </el-form> </div> </template> <script> export default { data() { return { loginForm: { username: '', password: '' }, registerForm: { username: '', password: '' } }; }, methods: { login() { // 处理登录逻辑 }, register() { // 处理注册逻辑 } } }; </script> <style scoped> .login-register { width: 400px; margin: 0 auto; padding-top: 100px; } </style> ``` 这段代码实现了一个简单的登录注册页面,使用VueElement-UI库。其中,`loginForm`和`registerForm`分别是登录和注册表单的数据模型,通过`v-model`指令与输入框进行双向绑定。点击登录和注册按钮时,会触发对应的方法进行登录和注册逻辑的处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值