<table class="table clear" ref="tableDialog">
<tr>
<th width="30"></th>
<th >帖子</th>
<th >作者</th>
<th >频道</th>
<th >创建日期</th>
</tr>
<tbody v-if="dataList.length > 0">
<tr v-for="(item, index) in dataList" :key="index" @click="selectChecked($event,item)">
<td>
<input type="checkbox" class="checkboxitem" @click.stop="selectCheckedInput($event,item)"></td>
<td class="text-align-left">{{item.content}}</td>
<td>{{item.createUserName}}</td>
<td>{{item.channelName}}</td>
<td>{{item.createDate.substring(0, 16)}}</td>
</tr>
</tbody>
<div style="width: 810px; margin:0 auto" v-if="!dataList.length">
<no-data txt="暂无数据"></no-data>
</div>
</table>
// 点击整行
selectChecked(e,item){
console.log(e);
let inputDom = e.currentTarget.getElementsByClassName("checkboxitem")[0]
let inputDomChecked = inputDom.checked
this.clearChecked() // 清除选中
if(inputDomChecked){
inputDom.checked = false
this.checkedData = null
}else{
inputDom.checked = true
this.checkedData = item
}
},
// 点击checkbox
selectCheckedInput(e,item){
let inputDom = e.target
let inputDomChecked = inputDom.checked
if(inputDomChecked){
this.clearChecked()
inputDom.checked = true
this.checkedData = item
}else{
this.checkedData = null
}
},
// 清除所有选中ckeckbox
clearChecked(){
let checkAllDom= this.$refs.tableDialog.getElementsByClassName("checkboxitem")
for(let i=0; i<checkAllDom.length; i++){
checkAllDom[i].checked = false
}
},
vue table checkbox单选控制
最新推荐文章于 2024-01-18 16:34:57 发布