js原生表格多选

<table class="common-table" cellpadding="0" cellspacing="0" border="0" width="1900px">
    <thead>
    <tr>
        <th class="usr-name" style="width: 156px;"> 
            <div class="squaredFour">
                <input type="checkbox" id="_check_all" v-model="allCheckedBox"
                    @click="checkAllUsr"/>
                <label for="_check_all"></label>
            </div>
            <a href="javascript:;"  style="padding-left: 10px">webid</a>
        </th>
        <th>crmid</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(item, index) in tableDataAll" :key="item.cooper_id">
        <td class="usr-name">
            <!--昵称-->
            <div class="squaredFour">
                <input type="checkbox"
                        :id="'_check_item_' + index"
                        name="check"
                        @click="checkUsr(item.cooper_id)"
                        v-model="item.checked"
                >
                <label :for="'_check_item_' + index"></label>
            </div>
            <dl class="clearfix">
                <dd style="margin-left: 5px;
                    margin-right: 10px;
                    width: 18px;
                    height: 32px;
                    border-radius: 50%;
                    display: inline-block;">
                </dd>
                <dd class="name" style="text-align: left;padding-top: 5px;">
                    {{item.member_id == '0' ? '--' : (item.member_id || '--')}}                                        
                </dd>
            </dl>
        </td>
        <td>{{item.customer_id}}</td>
    </tr>
    </tbody>
</table>




// 全选所有
checkAllUsr: function () {
    var _this = this;
    if(_this.checkedIdArr.length !== _this.tableDataAll.length){
        this.tableDataAll.forEach(function (item) {
            if (_this.checkedIdArr.indexOf(item.cooper_id) === -1) {
                _this.checkedIdArr.push(item.cooper_id);
            }
            item.checked = true
        })
    } else {
        this.tableDataAll.forEach(function (item) {
            item.checked = false
        })
        _this.checkedIdArr = [];
    }
    console.log('_this.checkedIdArr :>> ', _this.checkedIdArr);
},
// 选择单个
checkUsr: function (checkId) {
    var _this = this;
    if (this.checkedIdArr.indexOf(checkId) === -1) {
        this.checkedIdArr.push(checkId);
    } else {
        this.checkedIdArr.forEach(function (item, index) {
            item === checkId && _this.checkedIdArr.splice(index, 1);
        });
    }
    if (_this.checkedIdArr.length !== _this.tableDataAll.length) {
        this.allCheckedBox = false
    } else {
        this.allCheckedBox = true
    }
},

allCheckedBox //是否全选当前表格


  .common-table thead tr th.usr-name {
    width: 200px;
    text-align: left;
    padding-left: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  
  .common-table thead tr th.usr-name > span {
    padding-right: 20px;
    color: #777;
  }
  .common-table tbody tr td.usr-name {
    position: relative;
    padding-left: 10px;
    /* width: 170px; */
    width: 138px;
    text-align: left;
  }
  .common-table tbody tr td.usr-name .squaredFour {
    position: absolute;
    top: 16px;
  }
  .common-table tbody tr td.usr-name a dl {
    margin-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex!important;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  
  .common-table tbody tr td.usr-name dl dd {
    float: left;
  }
  .common-table tbody tr td.usr-name dl dd.name {
    white-space: nowrap;
    width: 96px;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值