版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yilanyoumeng3/article/details/81293514
这半个月都在折腾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=""
background
layout="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=false
alert(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>