<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. 利用Smarty实现文本隔行变色

    行变色 php页面 <?phpinclude "libs/Smarty.class.php";$smarty = new Smarty(); $link = mysql_co ...

  2. 小D课堂-SpringBoot 2.x微信支付在线教育网站项目实战_4-1.单机和分布式应用的登录检验讲解

    笔记 第四章 开发在线教育视频站点核心业务之JWT微服务下的用户登录权限校验 1.单机和分布式应用的登录检验讲解     简介:讲解单机和分布式应用下登录校验,session共享,分布式缓存使用 1. ...

  3. tomcat简单快捷改端口

  4. [Spark] Spark 3.0 Accelerator Aware Scheduling - GPU

    Ref: Spark3.0 preview预览版尝试GPU调用(本地模式不支持GPU) 预览版本:https://archive.apache.org/dist/spark/spark-3.0.0-p ...

  5. Cgroup与LXC简介

    原文地址: https://blog.51cto.com/speakingbaicai/1359825 一.Docker.LXC.Cgroup的结构关系 根据Docker布道师Jerome Petaz ...

  6. 开题报告中如何将一段文字插入到word表格中

    1,举例如下,打开空白word,设计一个20列的表格.任意一段文字. 2,选中这段文字,点击替换按钮.查找内容为“?”,替换为“^&,”(后面是逗号),并勾选“使用通配符”. 3,全部替换得到 ...

  7. sql server 本机编译存储过程(内存优化表) 绕过不支持FULL OUTER JOIN 的限制的方法

    将FULL OUTER JOIN 转成left join,right join 和 union select * from A ID NAME4 Spaghetti1 Pirate2 Monkey3 ...

  8. Java 基础篇之lambda

    Lambda 示例 public interface Eatable { void taste(); } public interface Flyable { void fly(String weat ...

  9. 深入理解C语言-二级指针三种内存模型

    二级指针相对于一级指针,显得更难,难在于指针和数组的混合,定义不同类型的二级指针,在使用的时候有着很大的区别 第一种内存模型char *arr[] 若有如下定义 char *arr[] = {&quo ...

  10. *【Python】【demo实验26】【练习实例】【递归方法的使用】

    原题: 利用递归方法求5! 原题给出的解答: #!/usr/bin/python # encoding=utf-8 # -*- coding: UTF-8 -*- # 利用递归方法求5! def fa ...