element ui 添加選擇一行時爲單擊選中/取消，按ctrl鍵點擊實現多選，按shift或alt鍵實現連續多選。

時間 2019-11-21

標籤 element 添加選擇一行時爲單擊選中取消 ctrl 點擊實現 shift alt 連續欄目 HTML 简体版

原文原文鏈接

最近有需求，單擊一行時單選選中複選框，就在網上找了找，還真讓我找到了，大佬地址爲 http://www.javashuo.com/article/p-fbtbpqzn-bc.htmlcss

大佬的比較詳細，我就不抄過來了，本身去看吧html

我把他的總體demo整理了，注意這個demo中的複選框選中數據是存放在selectionRow這個集合中的，若有須要自行更改vue

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="element-ui/lib/vue.js"></script>//換成本身的地址
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">//換成本身的地址
    <script src="element-ui/lib/index.js"></script>//換成本身的地址
    <title>Document</title>
    <style>
        html,body {
            height: 100%;
            margin: 0;
            padding: 0px;
        }
        #app {
            height: 100%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange" @row-click="rowClick" :row-style="rowStyle"
              :row-class-name="rowClassName">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column label="日期" width="120">
            <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="120">
        </el-table-column>
        <el-table-column prop="address" label="地址" show-overflow-tooltip>
        </el-table-column>
    </el-table>
</div>
</body>
<script>
    const tableData = [{
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
    }, {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
    }, {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
    }, {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
    }, {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀區金沙江路 1518 弄'
    }]

    function getTopAndBottom(row, bottom, top) {
        let n = row.rowIndex,
            mx = bottom.rowIndex,
            mi = top.rowIndex;
        if (n > mx) {
            return {
                top: mi,
                bottom: n
            };
        } else if (n < mx && n > mi) {
            return {
                top: mi,
                bottom: n
            };
        } else if (n < mi) {
            return {
                top: n,
                bottom: mx
            };
        } else if (n == mi || n == mx) {
            return {
                top: mi,
                bottom: mx
            };
        }
    };

    var options = {
        data() {
            return {
                tableData: tableData,
                multipleSelection: [],
                selectionRow: []
            }
        },
        computed: {
            bottomSelectionRow() {
                if (this.selectionRow.length == 0) return null;
                return this.selectionRow.reduce((start, end) => {
                    return start.rowIndex > end.rowIndex ? start : end;
                });
            },
            topSelectionRow() {
                if (this.selectionRow.length == 0) return null;
                return this.selectionRow.reduce((start, end) => {
                    return start.rowIndex < end.rowIndex ? start : end;
                });
            }
        },
        methods: {
            rowClick(row, column, event) {
                let refsElTable = this.$refs.multipleTable;
                if (this.CtrlDown) {
                    refsElTable.toggleRowSelection(row);
                    return;
                }
                if (
                    this.shiftOrAltDown &&
                    this.selectionRow.length > 0
                ) {
                    let topAndBottom = getTopAndBottom(
                        row,
                        this.bottomSelectionRow,
                        this.topSelectionRow
                    );
                    refsElTable.clearSelection();
                    for (let index = topAndBottom.top; index <= topAndBottom.bottom; index++) {
                        refsElTable.toggleRowSelection(this.tableData[index], true);    //這裏的tableData是本身渲染表格時數據
                    }
                } else {
                    let findRow = this.selectionRow.find(c => c.rowIndex == row.rowIndex);
                    if (findRow && this.selectionRow.length == 1) {
                        refsElTable.toggleRowSelection(row, false);
                        return;
                    }
                    refsElTable.clearSelection();
                    refsElTable.toggleRowSelection(row);
                }
            },
            rowStyle({
                         row,
                         rowIndex
                     }) {
                Object.defineProperty(row, 'rowIndex', {
                    value: rowIndex,
                    writable: true,
                    enumerable: false
                })
            },
            rowClassName({
                             row,
                             rowIndex
                         }) {
                let rowName = "",
                    findRow = this.selectionRow.find(c => c.rowIndex === row.rowIndex);
                if (findRow) {
                    rowName = "current-row ";
                }
                return rowName;
            },
            handleSelectionChange(val) {
                this.selectionRow = val
            },
            keyDown(event) {
                let key = event.keyCode;
                if (key == 17) this.CtrlDown = true;
                if (key == 16 || key == 18) this.shiftOrAltDown = true;
            },
            keyUp(event) {
                let key = event.keyCode;
                if (key == 17) this.CtrlDown = false;
                if (key == 16 || key == 18) this.shiftOrAltDown = false;
            },
        },
        mounted() {
            window.addEventListener("keydown", this.keyDown, false);
            window.addEventListener("keyup", this.keyUp, false);
        },
        beforeDestroy() {
            window.removeEventListener("keydown", this.keyDown);
            window.removeEventListener("keyup", this.keyUp);
        }
    }
    new Vue(options).$mount('#app')
</script>
</html>

這裏注意下這個rowStyle 若是你有設置這個:row-style 的話要這樣寫element-ui

rowStyle({row, rowIndex}) {
    Object.defineProperty(row, 'rowIndex', {
        value: rowIndex,
        writable: true,
        enumerable: false,
    });
    return 'height:45px'
},

return 你設置的屬性app