ElementUI中的Table和collapse实现checkbox的多选和取消选择

最近项目中用到了Vue+ElementUI,就试着写了一些基本功能，坑真多。

废话不多说了，直接上代码

1、Vue+ElementUI+el-table实现复选框的多选和取消选择

html代码：注意这里在使用el-table的时候，选择的事件使用select,因为这个事件我们可以传递一个名为row的参数，该参数就是你选择的这一行的数据对象，我们就可以获取该对象中的任意一个属性的值（当然了，我们这里只要id），后面会介绍select-chang函数，

  <div>
        <el-button  @click="dialogVisible = true">添加</el-button>
        <el-button  @click="updateCustomer">修改</el-button>&nbsp;&nbsp;&nbsp;
        <el-button  @click="deleteCustomerByIds" >删除</el-button>&nbsp;&nbsp;&nbsp;
       <!-- <el-button :disabled="selectedIds.length==0" @click="deleteCustomerByIds" >删除</el-button>&nbsp;&nbsp;&nbsp;-->
    </div>
           <el-table :data="custList"  border="1"  style="width: 100%"
                    @select="selectionChange" ref="table">
               <el-table-column type="selection" 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.$index,scope.row.cust_id)">删除</el-button>
                   </template>
               </el-table-column>
           </el-table>

js：这里只列出通过点击checkbox来获取数据的id和取消点击时将数组的id移除的方法。有了id后面的操作就是发送ajax请求操作后台了，这里就不再叙述。

selectionChange:function (val,row) {
                vm.selectedObj=val;
                alert(row.cust_id); // 注：这里的val是一个数组的格式，row是选中的数据对象的格式，可以点出属性取值，符合我们的要求
                // 传递两个参数的目的是，如果这里你只传递一个那么默认为val，是不是有点坑。。。
                if($(":checkbox").is(':checked') && (vm.selectedIds.indexOf(row.cust_id)==-1)){
                    vm.selectedIds.push(row.cust_id);
                }else{
                    var ind = vm.selectedIds.indexOf(row.cust_id);
                    alert("ind"+ind);
                    vm.selectedIds.splice(ind,1);
                }
            }

2、Vue+ElementUI+el-collapse实现复选框的多选和取消选择
element的折叠面板是一个看起来很强大，用起来也很强大、灵活的组件

html:注意，如果在折叠面板里使用了该标签会出现布局混乱的状态

<el-col></el-col>

解决方式，利用其它的组件去格式化该样式，我这里采用了el-form,具体做法参考如下代码。可以在页面用{{selectedIds}}显示选中集合的id来显示，是否真确选中元素和取消选择。这里的selectedIds是我随便起的一个变量名字

  <!--折叠面板-->
    {{selectedIds}}
    <div>

        <template v-for="(customer,index) in custList">
            <el-collapse v-model="activeNames" @change="handleChange" accordion class="clearfix">
                <el-collapse-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" style="height: 100%">
                                <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" :offset="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-collapse-item>
            </el-collapse>
        </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.selectedIds.indexOf(id)==-1)){
                    vm.selectedIds.push(id);
                }else{
                    var ind = vm.selectedIds.indexOf(id);
                    alert("ind"+ind);
                    vm.selectedIds.splice(ind,1);
                }
            }

3、上面我说select-change太坑，其实是我没有弄清楚他的数据结构

如果我们使用了select-change的话，他会把所有的数据都追加到一起，其实是不太正确的，正确的是，它吧我们选中的所有的数据，放在一个数组里面，每行为一个元素，我们取的时候，循环该数据即可
代码如下：
html:

 @selection-change="selectChangeTest1"  // 在table中绑定该事件

js:注this.selectChangeTest=[]; // 这里一定要记得，每次点击的时候要清空，因为所有的数据都在一个数组val里，即，每当点击都会触发该事件，当你选中第1，3行的时候，在选择4，此时它会吧4也给添加到数组，，然后将整个数据再返回，所以我们接受的数组也要有相应的改变，即清空（我就是被坑在这里了，，，自己没有搞懂控件的数据是怎么存放的）。

 selectChangeTest1:function (val) {

            if(val){
                alert(val);
                this.selectChangeTest=[]; // 这里一定要记得，每次点击的时候要清空，因为所有的数据都在一个数组val里，所以
                for(var i in val){
                    this.selectChangeTest[i]=(val[i].userId);
                }
            }
        }

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，则会导致第一次选中时不勾选问题

总结，以上函数以前并不知道怎么使用，只是网上搜代码，各种解释，一头雾水。后来慢慢查官方文档，发现官方文档写的很清楚。以后要学会通过官方文档来学习。