码迷,mamicode.com
首页 > 其他好文 > 详细

vue中优化CheckBox初始状态被选中问题

时间:2018-08-29 14:26:58      阅读:458      评论:0      收藏:0      [点我收藏+]

标签:result   sel   style   each   input   div   temp   table   head   

<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初始状态被选中问题

标签:result   sel   style   each   input   div   temp   table   head   

原文地址:https://www.cnblogs.com/cx709452428/p/9553127.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!