<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初始状态被选中问题的更多相关文章

  1. vue中关于checkbox数据绑定v-model指令的个人理解

    vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'>     <input type=&qu ...

  2. vue中关于checkbox数据绑定v-model

    vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'>     <input type=&qu ...

  3. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  4. vue中关于checkbox数据绑定v-model指令说明

    vue.js为开发者提供了很多便利的指令,其中v-model用于表单的数据绑定很常见, 下面是最常见的例子: <div id='myApp'> <input type="c ...

  5. js jquery中判断checkbox是否被选中的方法

    在js中: document.getElementById("checkboxID").checked   返回true或者false jQuery中: $("input ...

  6. 关于Vue中,checkBox等组件在赋值后,点击切换页面未及时更新问题

    我们经常碰到这样的问题,在v-for循环中,给某些组件(此处以checkBox为例)赋值后,组件并不能正常切换, 这是因为数据层太多,render函数没有自动更新,需手动强制刷新. 解决方法:在切换c ...

  7. 判断HTML中的checkbox是否被选中

    //合法性验证 function checkValidity() { var userNameCheck = $("#userNameCheck").attr('checked') ...

  8. jq、js中判断checkbox是否选中

    最近在开发项目时用到checkbox复选框,其中遇到一个问题:在JQ中如何判断checkbox是否被选中呢?之前用JQ获取元素的属性用的都是attr(),但用在checkbox上却没有用,原因何在?? ...

  9. HTML5中的checkbox

    HTML5中的checkbox 1.选中checkbox (1)<input type="checkbox" checked/> (2)<input type=& ...

随机推荐

  1. 网站title,meta,description如何设置,长度大小多少合适!

    转自:http://www.os1010.com/archives/1682 如 何 把 握 html 网 页 中 的 meta 标 签 对于高级的搜索引擎来说,html 的meta 标签并不是什么新 ...

  2. FullSync不支持中文文件名

    FullSync,能实现多种方式.协议的目录同步软件,但不支持中文文件名.

  3. CentOS 7系统配置上的变化

    http://www.linuxidc.com/Linux/2014-09/107375p4.htm CentOS 7系统配置上的变化解析 ip ss指令替代 ifconfig route arp n ...

  4. Arrays.asList()使用指南

    简介 Arrays.asList()在平时开发中还是比较常见的,我们可以使用它将一个数组转换为一个List集合. String[] myArray = { "Apple", &qu ...

  5. zabbix通过SDK和API获取阿里云RDS的监控数据

    阿里云的RDS自带的监控系统获取数据不怎么直观,想要通过API获取数据通过zabbix显示,因为网上资料缺乏和其他一些原因,获取API签名很困难,但使用阿里云的SDK可以完美避开获取签名的步骤. 阿里 ...

  6. centos6.8(虚拟机VNC)输入正确用户名和密码仍跳回登录界面

    1)CentOS自动更新到6.8后root无法登陆问题解决 虚拟机CentOS服务器不知道被谁更新系统到6.8后,发现在本机上即使输入正确的密码也无法登陆,发现有一些人也碰见过同样的问题,但是他们是因 ...

  7. DRF视图-5个扩展类以及GenericAPIView基类

    视图 5个视图扩展类 视图拓展类的作用: 提供了几种后端视图(对数据资源进行曾删改查)处理流程的实现,如果需要编写的视图属于这五种,则视图可以通过继承相应的扩展类来复用代码,减少自己编写的代码量. 这 ...

  8. Nginx配置缓存服务器

    Nginx为静态资源配置缓存服务器对网站性能提供很可观. 1.配置 接下来我看如何配置: 我的环境是在同一台机器上配置了一个用openresty搭建的反向代理,上游服务器(后端服务器)是本机的ngin ...

  9. WebContent下新建目录放入jsp,跳转servlet页面出错解决

    为方便分类jsp文件,于是在web-content下新建了一级目录,将jsp文件放入其中,结果原本跳转的servlet出现404错误: 解决如下: 在用eclipse创建的servle会自动生成一个注 ...

  10. Windows主机SAM文件格式破解解密

    文件格式如是下图这种格式: 那么就可以通过通过kali终端samdump2 + system + sam 生成出来通过hashcat -m 1000去跑,或者通过md5查询