ElementUI中的Table和collap实现checkbox的多选和取消选择
最近项⽬中⽤到了Vue+ElementUI，就试着写了⼀些基本功能，坑真多。
废话不多说了，直接上代码
1、Vue+ElementUI+el-table实现复选框的多选和取消选择
html代码：注意这⾥在使⽤el-table的时候，选择的事件使⽤lect，因为这个事件我们可以传递⼀个名为row的参数，该参数就是你选择的这⼀⾏的数据对象，我们就可以获取该对象中的任意⼀个属性的值（当然了，我们这⾥只要id），后⾯会介绍lect-chang函数，
<div>
<el-button @click="dialogVisible = true">添加</el-button>
<el-button @click="updateCustomer">修改</el-button>
<el-button @click="deleteCustomerByIds" >删除</el-button>
<!-- <el-button :disabled="lectedIds.length==0" @click="deleteCustomerByIds" >删除</el-button> -->
</div>
<el-table :data="custList" border="1"
@lect="lectionChange" ref="table">梦见捡了好多钱
<el-table-column type="lection" width="170"> </el-table-column>
<el-table-column prop="cust_id" label="⽤户ID" width="170"></el-table-column>
<el-table-column prop="cust_name" label="⽤户姓名" width="170"></el-table-column>
<el-table-column prop="cust_phone" label="⽤户电话" width="170"></el-table-column>
<el-table-column prop="cust_address" label="⽤户地址" width="170"></el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="deleteCustomer(scope.$w.cust_id)">删除</el-button>
</template>
</el-table-column>
</el-table>
js：这⾥只列出通过点击checkbox来获取数据的id和取消点击时将数组的id移除的⽅法。有了id后⾯的操作就是发送ajax请求操作后台了，这⾥就不再叙述。
lectionChange:function (val,row) {
vm.lectedObj=val;
alert(row.cust_id); // 注：这⾥的val是⼀个数组的格式，row是选中的数据对象的格式，可以点出属性取值，符合我们的要求
// 传递两个参数的⽬的是，如果这⾥你只传递⼀个那么默认为val，是不是有点坑。。。
if($(":checkbox").is(':checked') && (vm.lectedIds.indexOf(row.cust_id)==-1)){
vm.lectedIds.push(row.cust_id);
}el{
var ind = vm.lectedIds.indexOf(row.cust_id);
alert("ind"+ind);
vm.lectedIds.splice(ind,1);
}
}
2、Vue+ElementUI+el-collap实现复选框的多选和取消选择
element的折叠⾯板是⼀个看起来很强⼤，⽤起来也很强⼤、灵活的组件
html：注意，如果在折叠⾯板⾥使⽤了该标签会出现布局混乱的状态
几点几分<el-col></el-col>
解决⽅式，利⽤其它的组件去格式化该样式，我这⾥采⽤了el-form，具体做法参考如下代码。可以在页⾯⽤{{lectedIds}}显⽰选中集合的id来显⽰，是否真确选中元素和取消选择。这⾥的lectedIds是我随便起的⼀个变量名字
<!--折叠⾯板-->
{{lectedIds}}
<div>
<template v-for="(customer,index) in custList">
氨酪酸<el-collap v-model="activeNames" @change="handleChange" accordion class="clearfix">
<el-collap-item :name="index">
<template slot="title">
<div class="accordionTitle" >
<!--对齐-->
<el-col :span="1">
<el-form-item label="">
+
</el-form-item>
</el-col>
<el-col :span="2">
+
</el-col>
<el-col :span="2">
<el-checkbox @change="changes(index,customer.cust_id)"></el-checkbox> </el-col>
<el-col :span="2">
⽤户ID：{{customer.cust_id}}
</el-col>
<el-col :span="4">
{{customer.cust_name}}
</el-col>
<el-col :span="1" >
<em v-if="index<9">0{{index+1}}</em>
<em v-if="index>8">{{index+1}}</em>
</el-col>
</div>
</template>
<div class="accordionCon">
<el-col :span="4" :offt="2">
<el-col :span="24" >
<span>⽤户ID： {{customer.cust_id}}</span>
</el-col>
<el-col :span="24" >
<span>⽤户姓名： {{customer.cust_name}}</span>
</el-col>
</el-col>
</div>
</el-collap-item>
</el-collap>
</template>
</div>
js：和上⼀个js差不多，注意，这⾥⽤到了el-checkbox的@change事件
changes:function (index,id) {
alert("index"+index);
alert("id"+id);
alert( $(":checkbox").is(':checked'));
if($(":checkbox").is(':checked') && (vm.lectedIds.indexOf(id)==-1)){
朋能组什么词vm.lectedIds.push(id);
}el{
var ind = vm.lectedIds.indexOf(id);
alert("ind"+ind);
vm.lectedIds.splice(ind,1);
}
}
3、上⾯我说lect-change太坑，其实是我没有弄清楚他的数据结构
如果我们使⽤了lect-change的话，他会把所有的数据都追加到⼀起，其实是不太正确的，正确的是，
它吧我们选中的所有的数据，放在⼀个数组⾥⾯，每⾏为⼀个元素，我们取的时候，循环该数据即可
代码如下：
html:
@lection-change="lectChangeTest1" // 在table中绑定该事件
js：注this.lectChangeTest=[]; // 这⾥⼀定要记得，每次点击的时候要清空，因为所有的数据都在⼀个数组val⾥，即，每当点击都会触发该事件，当你选中第1，3⾏的时候，在选择4，此时它会吧4也给添加到数组，，然后将整个数据再返回，所以我们接受的数组也要有相应的改变，即清空（我就是被坑在这⾥了，，，⾃⼰没有搞懂控件的数据是怎么存放的）。
lectChangeTest1:function (val) {
if(val){
团支书个人简介alert(val);
this.lectChangeTest=[]; // 这⾥⼀定要记得，每次点击的时候要清空，因为所有的数据都在⼀个数组val⾥，所以
for(var i in val){
this.lectChangeTest[i]=(val[i].urId);
}
}
}
4、splice函数
⽤法1、
这⾥还想解释⼀下splice(index,1)函数。该函数在有两个参数的时候，第⼀个参数为元素所在的索引，第⼆个参数为将要删除的元素的个数。例如，若该数组为[1,6,99,5] 。splice(2,1)就代表从索引为2的元素开始向后删除，splice(2,1)即将“99” 这个元素删除掉。即如果是splice(2,3)即从索引为2的元素开始（包括索引为2的元素）⼀直向后删除3个元素（即删除索引为2、3、 4的3个元素）。
如下所⽰：
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);
fruits 输出结果：
Banana,Orange
⽤法2、
移除数组的第三个元素，并在数组第三个位置添加新元素:
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
fruits 输出结果：
Banana,Orange,Lemon,Kiwi,Mango
补充⼀：ElementUI在给表格设置了⾼度后，表格的表头会⾃动固定（详见官⽹说明）。
燕窝对身体的好处
补充⼆：有时候在打开静态页⾯的时候会出现先在空⽩页⾯显⽰数据（此时没有任何样式，只是数据）（页⾯⽤的Vue），在页⾯加v-cloak后可解决该现象
</head>
食草性<body>
离职声明<div id="articleEdit" v-cloak>
注：如果单独使⽤el-checkbox，在该标签内如果添加了v-model，则会导致第⼀次选中时不勾选问题
总结，以上函数以前并不知道怎么使⽤，只是⽹上搜代码，各种解释，⼀头雾⽔。后来慢慢查官⽅⽂档，发现官⽅⽂档写的很清楚。以后要学会通过官⽅⽂档来学习。
