vue中优化CheckBox初始状态被选中问题
<template>
<div class="hello">
<h2>我是主界面</h2>
<!-- <h2>我是最大值{{maxNumber}}</h2>
<h2>我是最小值{{minNumber}}</h2> -->
<table class="table">
<thead>
<tr>
<th>
<input type="checkbox" v-model='selectAll'/>
</th>
<th class="account">{{$t('m.Account')}}</th>
<!-- <th class="departName">{{$t('m.Department_Name')}}</th> -->
<th class="realName">{{$t('m.User_Name')}}</th>
<!-- <th class="roleName">{{$t('m.Role_Name')}}</th> -->
<!-- <th class="status">{{$t('m.Status')}}</th> -->
</tr>
</thead>
<tbody>
<tr v-for="(item,index) in userList" :key="index">
<td>
<input type="checkbox" :value="item.id" v-model='checkedIds' />
</td>
<td @click="editUser(item.id)" class="accountEdit account">
<a class="hoverStyle">{{ item.account }}</a>
</td>
<!-- <td class="departName"><span v-show="item.parentDeptName">{{item.parentDeptName}}/</span>{{ item.deptName||''}}</td> -->
<td class="realName">{{ item.userName }}</td>
<!-- <td class="roleName">{{ item.roleName }}</td> -->
<!-- <td class="langCodeNoClass status">{{$t('m.'+ statusChange(item.status))}}</td> -->
</tr>
</tbody>
</table>
</div>
</template> <script>
import mixins from 'assets/js/mixins'
export default {
mixins:[mixins],
name: 'authority',
data () {
return {
checkedIds:[],
userList:[
{id:1,account:'mike1',userName:'mikea',roleName:'经理1',status:0},
{id:2,account:'mike2',userName:'mikeb',roleName:'经理2',status:2},
{id:3,account:'mike3',userName:'mikec',roleName:'经理3',status:1},
{id:4,account:'mike4',userName:'miked',roleName:'经理4',status:0},
],
maxNumber:0,
minNumber:0,
}
},
methods:{
getDepartmentUser(departmentId){
let vm=this;
let url='/user/deptUserList';
var params = {
departmentId:departmentId
}
this.ajaxSend(url,params).then((data)=>{
vm.userList=data.payload.results.users;
});
},
},
computed: {
selectAll: {
get() {
//判断列表数组是否为空数组,如果是的话,全选默认为不选中,优化初始无数据的空数组被选中问题
return (this.userList&&this.userList.length>0) ? this.checkedIds.length == this.userList.length : false;
},
set(value) {
var checkedIds = [];
if (value) {
this.userList.forEach(function (index) {
checkedIds.push(index.id);
});
}
this.checkedIds = checkedIds;
}
}
},
mounted(){
// this.maxNumber = Number.MAX_VALUE;
// this.minNumber = Number.MIN_VALUE;
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
vue中优化CheckBox初始状态被选中问题的更多相关文章
- vue中关于checkbox数据绑定v-model指令的个人理解
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type=&qu ...
- vue中关于checkbox数据绑定v-model
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type=&qu ...
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- vue中关于checkbox数据绑定v-model指令说明
vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type="c ...
- js jquery中判断checkbox是否被选中的方法
在js中: document.getElementById("checkboxID").checked 返回true或者false jQuery中: $("input ...
- 关于Vue中,checkBox等组件在赋值后,点击切换页面未及时更新问题
我们经常碰到这样的问题,在v-for循环中,给某些组件(此处以checkBox为例)赋值后,组件并不能正常切换, 这是因为数据层太多,render函数没有自动更新,需手动强制刷新. 解决方法:在切换c ...
- 判断HTML中的checkbox是否被选中
//合法性验证 function checkValidity() { var userNameCheck = $("#userNameCheck").attr('checked') ...
- jq、js中判断checkbox是否选中
最近在开发项目时用到checkbox复选框,其中遇到一个问题:在JQ中如何判断checkbox是否被选中呢?之前用JQ获取元素的属性用的都是attr(),但用在checkbox上却没有用,原因何在?? ...
- HTML5中的checkbox
HTML5中的checkbox 1.选中checkbox (1)<input type="checkbox" checked/> (2)<input type=& ...
随机推荐
- Twisted & Treq
1. Install treq:pip install treq 2. If twisted install failed, please reinstall itpip install twiste ...
- Java泛型(9):动态类型安全
因为可以向Java SE5之前的代码传递泛型容器,所以旧式代码仍有可能破坏你的容器.Java SE5中有一组便利工具,可以解决这种情况下类型检查的问题. 它们是静态方法checkedCollectio ...
- 删除ELK的索引
终于找到一个工具,curator,可以搜索相关信息. 记录一下: 1,查询索引: curator_cli --host 10.2.16.191 --port 9200 show_indices - ...
- A simple dynamic library implemented in C# 4.0 to deal with XML structure
https://github.com/cardinals/XmlToObjectParser A simple dynamic library implemented in C# 4.0 to dea ...
- shell脚本常见的结构化函数
if-then if command then command fi if-then-else if command then command else command fi 嵌套if if comm ...
- JAVA各种框架插件常用端口:redis、MySQL、rabbitmq、elasticsearch、tomcat等等
默认端口号 应用 21 FTP(文件传输) 22 SSH(安全登录).SCP(文件传输).端口重定向 23 Telnet(远程登录) 80 HTTP服务器 1433 SQL Server数据库serv ...
- 深入理解C语言-二级指针三种内存模型
二级指针相对于一级指针,显得更难,难在于指针和数组的混合,定义不同类型的二级指针,在使用的时候有着很大的区别 第一种内存模型char *arr[] 若有如下定义 char *arr[] = {&quo ...
- 零零散散的python笔记
Python strip()方法 用于移除字符串头尾指定的字符(默认为空格或换行符)或字符序列. #!/usr/bin/python # -*- coding: UTF-8 -*- str = &qu ...
- Angular中ngx-image-cropper图片裁剪的使用
GitHub示例源码地址:https://github.com/luoruiemail/ngx-image-cropper 下载下来之后,执行yarn install安装相关node_modules包 ...
- vultr 更换服务器
今天打算去p站看看电影 结果发现自己的vps被封了......记录一下换服务器的过程 首先去 https://www.17ce.com/ ping一下,发现只有国外的服务器能ping通 果然是被封了. ...