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

小灰灰 2022-05-21 01:46 497阅读 0赞

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

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

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

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

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

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

[70]: /images/20220521/9cd9dab554334febad58217d14dda988.png
[70 1]: /images/20220521/1f8aba5381be463694d4ad64047f43f6.png