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

1. 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>

1. 全选问题，发现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>