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=& ...
随机推荐
- java配置SSM框架下的redis缓存
pom.xml引入依赖包 <!--jedis.jar --> <dependency> <groupId>redis.clients</groupId> ...
- Python3 循环_break和continue语句及循环中的else子句
break和continue语句及循环中的else子句break语句可以跳出for和while的循环体.如果你从for或while循环中终止,任何对应的循环else块将不执行. continue语句被 ...
- springboot-helloworld-idea
1.file-new-project-Spring Initializr-next:输入项目信息-next:web-next-finish 2.创建controller包 3.创建StudyContr ...
- lua学习笔记2--table
table是lua中的一种"数据/代码结构",可以用俩创建不同的"数据类型"lua语言中的数组其实就是table类型 array = {, , , , } pr ...
- Java 基础篇之泛型
背景 在没有泛型前,一旦把一个对象丢进集合中,集合就会忘记对象的类型,把所有的对象都当成 Object 类型处理.当程序从集合中取出对象后,就需要进行强制类型转换,这种转换很容易引起 ClassCas ...
- prometheus 的promsql的经典例子 安装grafana
0.好的参考文档 https://www.cnblogs.com/longcnblogs/p/9620733.html 1.多维度数据 2.Prometheus的全局监控指标 只需要定义一个全局的指标 ...
- zping ping包工具20180605.exe测试版
链接: https://pan.baidu.com/s/1WB3BZn0r9n4DRU_8bNC65g 提取码: mybi zping的第一个exe版本由于未对兼容性进行测试,使用python3.6编 ...
- windows下安装和配置SNMP
window snmp服务开启及测试 转自:https://blog.csdn.net/qq_33314107/article/details/80031446 一 安装 二 开启服务 Linux下安 ...
- Netty源码之解码中两种数据积累器(Cumulator)的区别
上一篇随笔中已经介绍了解码核心工作流程,里面有个数据积累器的存在(Cumulator),其实解码中有两种Cumulator,那他们的区别是什么呢? 还是先打开ByteToMessageDecoder的 ...
- vim 常用基本
vim 基本操作 0. 基本操作 :w // 保存当前文件 :q // 退出vim :wq // 保存退出 :w! // 强制保存当前文件 :q! // 强制退出(可以忽略修改) :!cmd // 执 ...