<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;
}
js原生表格多选
于 2023-08-21 15:45:29 首次发布