vue element ui下拉菜单和不是table列表全选功能问题解决方案

这半个月都在折腾vue的项目，虽然不是很复杂，但对于刚入门的小白来说，踩到的坑不少，常常因为一个小问题就得浪费好久问题，不过娃不在身边，晚上和周末可以继续研究，趁睡觉前，把今天遇到的问题给总结一下，做个记录，也希望可以为同行的童鞋提供点小小的解决思路。

dropdown组件的下拉菜单子选项click事件触发没反应问题，代码如下
给@click加上native 如@click.native

 <el-dropdown-menu slot="dropdown" ><el-dropdown-item :data-url="item.moreop.editUrl">编辑</el-dropdown-item><el-dropdown-item @click.native="itemDel(index)" :data-url="item.moreop.delUrl">删除 </el-dropdown-item><el-dropdown-item ><router-link :to="item.moreop.memberUrl">成员管理</router-link></el-dropdown-item><el-dropdown-item :data-url="item.moreop.shareUrl">分享</el-dropdown-item></el-dropdown-menu>

全选问题，发现element ui table和checkbox组件里面的全选功能都不适合我这全选的场景，就根据数据的来回改变，自己写了一个，样式不是很完整，但是凑合能用

<template><div class="main-box"><div class="main-tit clearfix"><div class="ablum-info-h-tit"><router-link to="">返回</router-link><img src="../assets/images/1.png"/><strong>Walter</strong></div><div class="album-head-tool"><a href="javascript:;" class="btn ">复制</a><a href="javascript:;" class="btn ">移动</a><a href="javascript:;" class="btn ">删除</a><a href="javascript:;" class="btn btn-blue ">导入书签</a></div></div><div class="main-con "><el-row class="album-list-tit"><el-col :span="13"><div class="grid-content "><el-checkbox v-model="allChecked"  @change="setCheckedAll"></el-checkbox>网址</div></el-col><el-col :span="4"><div class="grid-content ">更新时间</div></el-col><el-col :span="4"><div class="grid-content">二维码</div></el-col><el-col :span="3"><div class="grid-content bg-purple-light">操作</div></el-col></el-row><el-row class="album-list-list-item" v-for="(item,index) in itemlis"><el-col :span="13"><div class="grid-content "><el-checkbox v-model="item.checked" ></el-checkbox> <span class="album-info-net">{{item.net}}</span></div></el-col><el-col :span="4"><div class="grid-content "><span>{{item.time}}</span></div></el-col><el-col :span="4">{{item.wqcode}}</el-col><el-col :span="3"><div class="grid-content album-l-l-tool "><div class="more-tip-op"><el-dropdown><span class="el-dropdown-link"><em class="el-icon-more"></em></span><el-dropdown-menu slot="dropdown" ><el-dropdown-item :data-url="item.opUrl.removeUrl">移动</el-dropdown-item><el-dropdown-item :data-url="item.opUrl.copyUrl">复制</el-dropdown-item><el-dropdown-item @click.native="itemDel(index)" :data-url="item.opUrl.delUrl">删除 </el-dropdown-item><el-dropdown-item :data-url="item.opUrl.exportUrl">导出</el-dropdown-item><el-dropdown-item :data-url="item.opUrl.editName">重命名</el-dropdown-item></el-dropdown-menu></el-dropdown></div></div></el-col></el-row><div class=""><el-pagination
                        @current-change="handleCurrentChange"@prev-click=""@next-click=""backgroundlayout="prev, pager, next":page-size="pageSize":total="totalDataNumber"></el-pagination></div></div></div>
</template><script>import Vue from'vue'import  VueResource  from 'vue-resource'import dropDown from '../components/base/dropdown'Vue.use(VueResource)export default {data() {return {allChecked:false,picShow:false,show:false,url:'api/albuminfo',itemlis:[],eleUrl:'',pageNo: 1,pageSize: 8,tableData: [],//返回的结果集合totalDataNumber: 0,//数据的总数};},mounted(){this.getAllSub(this.url,this.pageNo,this.pageSize);},components:{MyDialog,dropDown},methods: {//改变页码handleCurrentChange(val){this.getAllSub(this.url,val,this.pageSize);},sucTip(msg,type) {this.$message({message: msg,type: type});},submitDialog(e){this.$http.get('api/getCode').then((res)=>{var arrJson=JSON.parse(res.bodyText)this.show=falsealert(arrJson.data.msg)},function(err){console.log(err)})},itemDel(index){//this.show=true;this.itemlis.splice(index, 1);console.log(this.itemlis.length)//this.sucTip("删除成功",'success')},//加载数据后，判断是否全选setInitCheck(){let arr =this.itemlis,len = arr.length,arrChecked=[];for(var i=0;i<len;i++){if(arr[i].checked==true){arrChecked.push(arr[i]);}}if(len==arrChecked.length){this.allChecked=true} else{this.allChecked=false;}},handleclose(d){this.show=false},getAllSub(url,pageNo,pageSize){url+="?pageNo="+pageNo+"&pageSize="+pageSize;this.$http.get(url).then((res)=>{var arrJson=JSON.parse(res.bodyText)this.itemlis=arrJson.data;this.totalDataNumber=arrJson.totalNum;//初始化是否全选this.setInitCheck();},function(err){console.log(err)})},//全选功能setCheckedAll(e){let arr =this.itemlis,len = arr.length;for(var i=0;i<len;i++){arr[i].checked=this.allChecked;}}}};
</script><style scoped></style>

vue element ui下拉菜单和不是table列表全选功能问题解决方案相关推荐

vue、Dropdown 下拉菜单、Dropdown属性事件、vue Dropdown 全部下拉菜单、vue Dropdown 全部属性事件
vue.Dropdown 下拉菜单.Dropdown属性事件.vue Dropdown 全部下拉菜单.vue Dropdown 全部属性事件设计规则何时使用代码演示 1.基本 2.右键菜单 3. ...
如何JQ将下拉列表的值传送给php,JQuery设置获取下拉菜单某个选项的值(比较全)...
JQuery获取和设置Select选项获取Select : 获取select 选中的 text : $("#ddlRegType").find("option:sele ...
vue下拉框值改变事件_vue和element ui 下拉框select的change事件
1 在线编辑测试工具编辑好代码后点击 run 即可 2 vue原生写法 2.1 html部分新增空 {{ drug.name }} 刪除尚未新增任何資料總金額:{{ totalMoney } ...
Vue+Element UI 下，如何给一个表单设置自定义规则或多个验证规则（：rules）
依旧是公司里那个Vue+Element UI的项目.今天遇到了一个新的问题:表单中某个选择器的值不同,控制着下面表单内容是否显示. 大概就是这个样子.由后台返回的"发放方式"的数值 ...
vue实现Dropdown下拉菜单
1.需求点击按钮出现下拉菜单 2.思路为按钮绑定点击事件showPicker() 在按钮下另起一个div标签,用v-show绑定一个属性值isShowDropdown 在methods里定义sho ...
vue+iview4.0 , vue+element实现下拉框可以自定义输入内容
前言: 最近10月的时候 iview4.0 更新了,但是一直在忙也没用到,正好因为要实现一个下拉框里面我要自定义输入内容的效果,element里面是有这个效果,antd里面没有,因为本项目用的ivie ...
element ui 下拉框搜索功能
正常的下拉框就是这样的,但是临时加需求说需要下拉框里面的信息不存在或者太多的时候,希望自己搜索想要的数据嗯~听产品的~解决了一下代码如下 <el-select :placeholder=&q ...
element ui下拉框实现
<template><el-select v-model="value4" clearable placeholder="请选择">&l ...
element ui 下拉框选择年份
<template><div class="wrap"><el-select v-model="form.recentYear" ...

vue element ui下拉菜单和不是table列表全选功能问题解决方案

vue element ui下拉菜单和不是table列表全选功能问题解决方案相关推荐

最新文章

热门文章