element-ui相關(guān)插件的應(yīng)用
``
<template>
<div id="app">
<table>
<th>
<td><el-checkbox :indeterminate="isIndeterminate" v-model="allChecked" @change="allCheck">全選</el-checkbox></td>
<td>頭1</td>
<td>頭1</td>
</th>
<tr v-for="(item,index) in list">
<td><el-checkbox v-model="item.isChecked" @change="mycheck(index)"></el-checkbox></td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
</template>
<script>
import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(Element)
export default {
name: 'app',
data() {
return {
list:[
{
name:"zhangsna",
age:11,
isChecked:false
},
{
name:"lisi",
age:22,
isChecked:false
}
],
allChecked:false,
isIndeterminate:false
}
},
methods: {
//單選
mycheck(index){
var fCount=0,tCount=0;
//判斷是否是全選
this.list.forEach((item,index) => {
if(item.isChecked){
tCount++;
}else{
fCount++;
}
});
if(tCount == this.list.length){
this.allChecked=true;
this.isIndeterminate=false;
}else if(fCount==this.list.length){
this.allChecked=false;
this.isIndeterminate=false;
}else{
this.isIndeterminate=true;
this.allChecked=false;
}
},
//全選
allCheck(){
this.isIndeterminate=false;
this.list.forEach((item,index) => {
item.isChecked=this.allChecked;
})
}
}
}
</script>
``
