最近项目中用到了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,则会导致第一次选中时不勾选问题

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

Logo

前往低代码交流专区

更多推荐