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=& ...
随机推荐
- Pro JavaScript List.11-11
//为实现各种现代浏览器的requestAnimationFrame()方法,创建一段简单的跨浏览器保障代码(polyfill),以实现流畅.高效的动画.由保罗•艾里什(Paul Irish)编写,网 ...
- PCL点云库(Point Cloud Library)简介
博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=29 什么是PCL PCL(Point Cloud Library)是在吸收了 ...
- MATLAB学习(三)元素访问和常用代数运算
>> A=[1,2;3,4],B=[0,2;4,5] A = 1 2 3 4 B = 0 2 4 5 >> C=A>=B C = 1 1 0 0 >> D=A ...
- Linux 上svn使用http访问设置
https://blog.csdn.net/wobuxingfang/article/details/70835414https://blog.csdn.net/u010487568/article/ ...
- Canal——增量同步MySQL数据到ElasticSearch
1.准备 1.1.组件 JDK:1.8版本及以上: ElasticSearch:6.x版本,目前貌似不支持7.x版本: Kibana:6.x版本: Canal.deployer:1 ...
- Golang gRPC微服务02: helloworld
安装protobuf 在windows下,直接下载release版本https://github.com/protocolbuffers/protobuf/releases/tag/v3.9.0然后把 ...
- 什么是MapReduce?
[学习笔记] 什么是MapReduce?马 克-to-win @ 马克java社区:1)MapReduce是面向大数据并行程序设计的模型和方法,这一点很像我们前面讲的MVC,MVC解决动态网站问题而 ...
- 解析Health端点数据获取异常数据
问题: 由于健康节点响应类型是Health类,并且由于需要执行的健康状态类不固定,返回的类型数据的字段不是固定的,所以使用了@JsonAngGetter 注解,照成了解析这个JSON 结构非常不方便. ...
- 解决使用wamp怎么使用php命令行
用了wamp,把php加到环境变量就报错啊! 那怎么用命令行啊! 可以找么着:(比如想执行 php think build --module demo) E:\php-project\tp5.> ...
- Kubernetes 相关镜像pull 不下来问题收集
1. 可在相关的镜像前添加 keveon 或者 mirrorgooglecontainers 就可以下载镜像, 然后在修改 tag docker pull mirrorgooglecontainers ...