父組件

<template>
    <div id=‘add‘>
        <airtable
            :tableData="tableData"
            :columData="columData"
            :menuList ="menuList"
            :pageTotal="pageTotal"
            @rowContextmenu="rowContextmenu"
            @currentPageChange="currentPageChange"
            @handleSelect="handleSelect"
        >
            <template slot=date slot-scope="scope">
                <!--把所有的數據都變成插槽導出-->
                <div class="air-table-slot__div">{{scope.row.date}}</div>
            </template>
            <template slot=name slot-scope="scope">
                <!--把所有的數據都變成插槽導出-->
                <div class="air-table-slot__div">{{scope.row.name}}</div>
            </template>
            <template slot=address slot-scope="scope">
                <!--把所有的數據都變成插槽導出-->
                <div class="air-table-slot__div">{{scope.row.address}}</div>
            </template>
        </airtable>
    </div>
</template>
<script>
import airtable from "@/components/newCommon/table/table.vue";
export default {
    components: {
        airtable
    },
    name: ‘text-form‘,
    data() {
        return {
            columData:[
                {
                    name: ‘時間‘,
                    key: ‘date‘,
                    isFixed: true,//固定列參數
                    width:"auto"
                },
                {
                    name: ‘名字‘,
                    key: ‘name‘,
                    isFixed: true,//固定列參數
                    width:"auto"
                },
                {
                    name: ‘地址‘,
                    key: ‘address‘,
                    isFixed: true,//固定列參數
                    width:"auto"
                },
            ],
            //table 表頭字段數據
            tableData: [
                
            ],
            //這個是右鍵的按鈕操作
            menuList:[{icon:"air-icon-moreapps",name:"操作"},{icon:"air-icon-moreapps",name:"曾加"},{icon:"air-icon-moreapps",name:"修改"}],
            //從後臺獲得的分頁的總數
            pageTotal:100
        }
    },
    methods: {
        //鼠標右鍵菜單點擊事件 傳出來的是要做的操作和當前的列
        rowContextmenu(item,row){
            console.log(item,row);
        },
        //監聽當前頁的變化
        currentPageChange(currentpage){
            console.log(currentpage);
        },
        //當鼠標批量編輯時或者點擊鼠標選中時觸發 傳來的是選中的列表數據
        handleSelect(multipleSelection){
            console.log(multipleSelection)
        }
    },
    watch: {
        
    },
    created(){
        for(var i=0;i<20;i++){
            this.tableData.push({
                date: ‘2016-05-03‘,
                name: ‘王小虎‘,
                address: ‘上海市普陀區金沙江路 1518 弄dddddddddddddddddddddddddddd‘,
                id:i
            })
        }
    }
}

</script>

<style>
#add {
    height:100%;
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}
.mengban {
    position: fixed;
    border: 1px solid rgb(0, 119, 255);
    background-color: rgba(0, 119, 255, 0.3);
    -moz-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
tbody{
    position: relative;
}
.air-table-slot__div {
    min-width: 200px;
    max-width: 300px;
    overflow: hidden;/*超出部分隱藏*/
    white-space: nowrap;/*不換行*/
    text-overflow:ellipsis;/*超出部分文字以...顯示*/
}
</style>

　　子組件table

<template>
    <div class=‘air-table-wrapper‘>
        <el-table 
            ref="table"
            :show-header="true"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%;"
            :header-row-class-name="headerClassName"
            :height="‘500‘"
            id="table" 
            @row-click="rowClick"
            @row-contextmenu="rowContextmenu"
            v-drag>
            <el-table-column  :type="isType" width="55" align="center"></el-table-column>
            <!--列表的表頭循環-->
            <el-table-column
                v-for="(column, index) in columData"
                :key="index"
                :label="column.name"
                :width="column.width">
                <template slot-scope="scope">
                    <!--把所有的數據都變成插槽導出-->
                    <slot :name="column.key" :row="scope.row"> </slot>
                </template>
            </el-table-column>
            <template slot=append>
                <div :class="[‘el-table__append-page‘]">
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="20"
                        layout="total, prev, pager, next"
                        :total="pageTotal">
                    </el-pagination>
                </div>
            </template>
        </el-table>
        <air-contex-menu
            :position="position"
            :toggleShow="toggleShow"
            :menuList="menuList"
            @menuClick="menuClick"
        ></air-contex-menu>
    </div>
</template>
<script>
import airContexMenu from ‘./contextMenu.js‘;
export default {
    name: ‘airtable‘,    
    // 框選的指令
    directives: {
        drag: {
            // 指令的定義
            inserted: function (el, binding, vnode) {
                var oDiv = el;
                //監聽用戶鼠標事件
                oDiv.onmousedown = function (ev) {
                    //初始化不顯示
                    vnode.context.toggleShow=false;   
                    //確保用戶在移動鼠標的時候只初始化一次選中
                    var flag = true;
                    //用來存儲列表
                    var selList = [];
                    //獲得指令下的dom對應的表格
                    var fileNodes = oDiv.getElementsByTagName("tr");     
                    var countI = 0;
                    //獲得鼠標
                    var evt = window.event || arguments[0];
                    var startX = (evt.x || evt.clientX);
                    var startY = (evt.y || evt.clientY);
                    var top,left;
                    //時時獲得
                    top=getY(oDiv);
                    left=getX(oDiv);
                    var selDiv = document.createElement("div");
                    selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;";
                    selDiv.id = "selectDiv";
                    document.getElementsByClassName("el-table__body")[0].appendChild(selDiv);
                    selDiv.style.left = startX + "px";
                    selDiv.style.top = startY + "px";
                    var _x = null;
                    var _y = null;
                    vnode.context.clearEventBubble(evt);
                    // //打開開關
                    vnode.context.mouseflag = true;
                    // //鼠標拖動時畫框
                    document.onmousemove = function (ev) {
                        evt = window.event || arguments[0];
                        _x = (evt.x || evt.clientX);
                        _y = (evt.y || evt.clientY);
                        //為了確定是點擊事件還是移動事件
                        if(Math.abs(_x - startX)<5 && Math.abs(_y - startY)<5){
                            return;
                        }
                        //為了確保只有一次的渲染每次框選都把默認選中為空
                        if(flag){
                            //重置選中css
                            for (var i = 0; i < fileNodes.length; i++) {
                                if (fileNodes[i].className.indexOf("el-table__row") != -1) {
                                    fileNodes[i].className = "el-table__row";
                                    selList.push(fileNodes[i]);
                                }
                            }      
                            vnode.context.multipleSelection=[]
                            vnode.context.tableData.forEach((ele)=>{
                                vnode.context.$refs.table.toggleRowSelection(ele,false)
                            })
                            flag = false;
                        }
                        if (vnode.context.mouseflag) {
                            if (selDiv.style.display == "none") {
                                selDiv.style.display = "";
                            }
                            var scrolling=oDiv.getElementsByClassName("is-scrolling-none");
                            selDiv.style.left = Math.min(_x, startX)-left+scrolling[0].scrollLeft + "px";
                            //48是表頭的高度
                            selDiv.style.top = Math.min(_y, startY)-top - 48+scrolling[0].scrollTop+ "px";
                            selDiv.style.width = Math.abs(_x - startX) + "px";
                            selDiv.style.height = Math.abs(_y - startY) + "px";

                            // ---------------- 關鍵算法確定列表的選中靠的是index---------------------
                            var _l = selDiv.offsetLeft, _t = selDiv.offsetTop;
                            var _w = selDiv.offsetWidth, _h = selDiv.offsetHeight;
                            for (var i = 0; i < selList.length; i++) {
                                var sl = selList[i].offsetWidth + selList[i].offsetLeft;
                                var st = selList[i].offsetHeight + selList[i].offsetTop;
                                if (sl > _l && st > _t && selList[i].offsetLeft < _l + _w && selList[i].offsetTop < _t + _h) {
                                    if (selList[i].className.indexOf("seled") == -1) {                                     
                                        selList[i].className = selList[i].className + " seled";
                                        vnode.context.$refs.table.toggleRowSelection(vnode.context.tableData[i],true)
                                        //把選中的都存入到table標簽中的已選中
                                        if(vnode.context.tableData[i])
                                            vnode.context.multipleSelection.push(vnode.context.tableData[i]);
                                    }
                                } else {
                                    if (selList[i].className.indexOf("seled") != -1 ) {                                  
                                        selList[i].className = "el-table__row";
                                        vnode.context.$refs.table.toggleRowSelection(vnode.context.tableData[i],false);
                                        vnode.context.multipleSelection.forEach((ele,i)=>{
                                            //這裏沒用對象是否相等用的是傳入table中的唯一的myKey字段
                                            if(ele[vnode.context.myKey]==vnode.context.tableData[i][vnode.context.myKey] ){
                                                vnode.context.multipleSelection.splice(i,1);
                                            }
                                        })
                                    }
                                }
                            }

                        }
                        vnode.context.clearEventBubble(evt);
                    };
                    //方法是確定列表到屏幕的位置
                    function getX(obj){
                        var parObj=obj;
                        var left=obj.offsetLeft;
                        while(parObj=parObj.offsetParent){
                            left+=parObj.offsetLeft;
                        }
                        return left;
                    }
                    //方法是確定列表到屏幕的位置
                    function getY(obj){
                        var parObj=obj;
                        var top=obj.offsetTop;
                        while(parObj = parObj.offsetParent){
                            top+=parObj.offsetTop;
                        }
                        return top;
                    }
                    //在鼠標擡起後做的重置
                    document.onmouseup = function () {
                        //把鼠標移動事初始化
                        document.onmousemove=null;
                        if (selDiv) {
                            document.getElementsByClassName("el-table__body")[0].removeChild(selDiv);
                        }
                        selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null;
                        vnode.context.mouseflag = false;
                        vnode.context.$handleSelect();
                    };
                };
            }
        }
    },
    components: {
        airContexMenu,
    },
    props: {
        //對於列表中唯一的字段myKey默認為id
        myKey: {
            type: String,
            default: "id"
        },
        //列表的數據
        tableData: {
            type: Array,
            default: () => []
        },
        //傳過來的表頭信息
        columData: {
            type: Array,
            default: () => []
        },
        //有沒有checkbox
        isType : {
            type: String,
            default: "selection"
        },
        //右鍵菜單
        menuList:{
            type: Array,
            default: () => []
        },
        //分頁的總頁數
        pageTotal:{
            type:Number,
            default: 0
        }
    },
    data() {
        return {
            //指令中確定的時候是鼠標按下事件
            mouseflag: false,
            //選中的數組
            multipleSelection: [],
            //控制右鍵菜單彈出顯示
            dialogVisible:false,
            //右鍵鼠標的位置
            position:{
                left:0,
                top:0
            },
            //控制右鍵顯示隱藏
            toggleShow :false,
            //分頁當前的頁數
            currentPage:1 ,
            //當前右鍵點擊的列
            currentRow:[],
            //當前滾動的距離，
            targetScroll:0
        }
    },
    methods: {
        //清除默認事件
        clearEventBubble(evt) {
            if (evt.stopPropagation)
                evt.stopPropagation();
            else
                evt.cancelBubble = true;
            if (evt.preventDefault)
                evt.preventDefault();
            else
                evt.returnValue = false;
        },
        //列表單擊選中事件
        rowClick(row, event, column) {
            let flag=true;            
            //確定當前的row的index
            var index = 0;
            this.tableData.forEach((ele,i)=>{
                if(ele[this.myKey] == row[this.myKey]){
                    index = i+1;
                }
            })
            this.toggleShow = false;
            //如果有就移除
            this.multipleSelection.forEach((ele,i)=>{
                if(ele[this.myKey]==row[this.myKey]){
                    this.$refs.table.toggleRowSelection(row,false);
                    //後期優化吧 element的方法用不了 只能自己改變類名
                    this.$refs.table.$el.getElementsByTagName("tr")[index].className = "el-table__row";
                    this.multipleSelection.splice(i,1);
                    flag = false;
                }
            })
            //如果沒有就push
            if(flag){
                this.$refs.table.toggleRowSelection(row,true);
                this.multipleSelection.push(row);
                //後期優化吧 element的方法用不了 只能自己改變類名
                this.$refs.table.$el.getElementsByTagName("tr")[index].className = "el-table__row seled";
            }        
        },
        //列表右鍵點擊事件
        rowContextmenu(row, event){
            //為當前的row賦值
            this.currentRow = row;
            //阻止默認右鍵點擊事件
            event.returnValue = false;
            //獲取右鍵坐標
            this.position.left = event.clientX
            this.position.top = event.clientY
            //菜單出現的flag
            this.toggleShow = true;
            //顯示彈出窗    
        },
        //右鍵菜單彈出事件
        menuClick(item){
            //右鍵點擊以後隱藏
            this.toggleShow=false;
            this.$emit("rowContextmenu",item,this.currentRow)
        },
        //每頁條數變化 ui定死每頁20條
        handleSizeChange(val) {
            // console.log(`每頁 ${val} 條`);
        },
        //當前頁變化
        handleCurrentChange(val) {
            this.currentPage = val;
            this.$emit(‘currentPageChange‘,this.currentPage)
        },
        //當批量選中結束調用
        $handleSelect(){
            this.$emit(‘handleSelect‘,this.multipleSelection)
        },
        //監聽表格的滾動
        handleScroll(e){
            this.targetScroll = e.target.scrollTop;          
        },
        //
        headerClassName(){
            return "air-table-header__class";
        }
    },
    computed: {
       
    },
    created() {
        
        //確保右鍵菜單消失
        document.onclick = ()=>{
            this.toggleShow=false;
        }
    },
    mounted() {
        
    }
}

</script>

<style lang="scss">
    @import "../../../public/style/mixin.scss";

    .air-table-wrapper {
        @include wh(100%, 100%);
        .seled {
            background: #f5f5f5 !important;
        }
        .no-seled{
            background: #ffffff !important;
        }
        .el-table__body tr{
            cursor: pointer;
            box-sizing: border-box;
            border-top:1px solid #f5f5f5;
            border-bottom:1px solid #f5f5f5;
        }
        .air-table-header__class th{
            border-bottom:1px solid #f5f5f5 !important;
        }
        .el-table__body td{
            border-bottom:1px solid #f5f5f5;
        }
        .hover-row {
            border-top:1px solid #f5f5f5;
            border-bottom:1px solid #f5f5f5;
            background: #fafafa;
        }
        .el-table__append-page{
            padding-top:48px;
            padding-bottom:48px;
            .el-pagination{
                text-align: right;
            }
        }
        .el-table__append-info{
            position: absolute;
            bottom:0px;
            width:100%;
            .el-pagination{
                text-align: right;
            }
        }
        .air-table__context--menu{
            box-shadow:0 3px 5px -1px rgba(0,0,0,.2), 0 6px 10px 0 rgba(0,0,0,.14), 0 1px 18px 0 rgba(0,0,0,.12);
            .air-table__context--list {
                cursor: pointer;
                height: 48px;
                @include flexCenter(flex-start,center);
                .air-table__context--icon{
                    font-size: 14px;
                    margin-left:20px;
                    color:#757575;
                }
                .air-table__context--info{
                    font-size: 14px;
                    margin-left:20px;
                    color:#212121;
                }
            }
            .air-table__context--list:hover{
                background: #f5f5f5;
            }
        }
        
        
    }
</style>

　　子組件中的右鍵菜單組件

export default {
    name: ‘airContexMenu‘,
    props: {
        position: {
            type: Object,
            default: () => {
                return {
                    top: 0,
                    left: 0
                }
            }
        },
        toggleShow:{
            type:Boolean,
            default: false
        },
        menuList : {
            type: Array,
            default: () => []
        }
    },
    render(h) {
        var self = this;
        var menuInfo = [];
        this.menuList.forEach((ele)=>{
            menuInfo.push(h(‘li‘,{
                style: {
                    width:"100%",
                    display:"flex"
                },
                class: [‘air-table__context--list‘,‘ripple‘],
                on: {   
                        click:function (){
                            self.$emit(‘menuClick‘, ele)
                        }
                    }
                },
            [
                h(‘i‘, {
                    class: [ele.icon,‘air-table__context--icon‘]
                }),
                h(‘span‘,{class:[‘air-table__context--info‘]}, ele.name)
            ]))
        })
        return h(
            ‘div‘, {
                style: {
                  width:"300px",
                  padding: "8px 0px",
                  position:"fixed",
                  left: this.position.left + "px",
                  top: this.position.top + "px",
                  display: this.toggleShow ? "block" : "none",
                  zIndex:99999,
                  backgroundColor:"#fff",
                  borderRadius:"4px"
                },
                class: [‘air-table__context--menu‘]
            },
            menuInfo
        );
    },
    computed: {
        
    },
    data() {
        return {
        
        };
    },
    created() {
        
    },
    methods: {
        menuClick(){
            
        }
    }
};

element table 實現鼠標拖拽選中