vue制作一个简单的支持多选的table

最新推荐文章于 2024-10-08 14:41:10 发布

萌萌哒小东西

最新推荐文章于 2024-10-08 14:41:10 发布

阅读量319

点赞数

分类专栏：前端文章标签： javascript vue.js html

本文链接：https://blog.csdn.net/tank7488/article/details/105768056

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Title</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>

<body>

    <style>
        [v-cloak] {
            display: none;
        }

        [disabled] {
            background-color: lightgray;
        }

        body {
            background-color: rgb(202, 237, 206);
        }

        .ctrl {
            border: solid black 3px;
        }

        .black-text {
            color: black;
        }

        .blue-text {
            color: blue;
        }

        input,
        textarea,
        select {
            width: 1000px;
            background-color: rgb(202, 237, 206);
            border: solid black 3px;
            font-size: 20px;
            font-family: 'consolas';
        }

        textarea {
            height: 200px;
        }

        .pre-wrap {
            white-space: pre-wrap;
        }

        .hover-lightblue:hover {
            background-color: rgba(0, 0, 255, 0.1);
        }

        .selected {
            background-color: rgba(0, 0, 255, 0.3);
        }

        .selected:hover {
            background-color: rgba(0, 0, 255, 0.5);
        }

        .user-select-none {
            user-select: none;
        }
    </style>

    <div id="table_template" v-cloak>
        <a href='javascript:void(0);' class='black-text' :class='{"blue-text":selection_mode==="none"}'
            @click.prevernt='selection_mode="none"'>none</a>
        <a href='javascript:void(0);' class='black-text' :class='{"blue-text":selection_mode==="single"}'
            @click.prevernt='selection_mode="single"'>single</a>
        <a href='javascript:void(0);' class='black-text' :class='{"blue-text":selection_mode==="add-only"}'
            @click.prevernt='selection_mode="add-only"'>add-only</a>
        <a href='javascript:void(0);' class='black-text' :class='{"blue-text":selection_mode==="remove-only"}'
            @click.prevernt='selection_mode="remove-only"'>remove-only</a>
        <a href='javascript:void(0);' class='black-text' :class='{"blue-text":selection_mode==="add-remove"}'
            @click.prevernt='selection_mode="add-remove"'>add-remove</a>
        <br>
        <a href='javascript:void(0);' @click.prevernt='select_all'>select_all</a>
        <a href='javascript:void(0);' @click.prevernt='unselect_all'>unselect_all</a>
        <a href='javascript:void(0);' @click.prevernt='toggle_all_selection'>toggle_all_selection</a>
        <!-- <a href='javascript:void(0);' @click.prevernt='rows[0].selected=true'>rows[0].selected=true</a> -->
        <!-- <a href='javascript:void(0);' @click.prevernt='rows[1].selected=false'>rows[1].selected=false</a> -->
        <a href='javascript:void(0);' @click.prevernt='check'>check</a>
        <a href='javascript:void(0);' @click.prevernt='uncheck'>uncheck</a>
        <br>
        <table border="1" cellspacing="0">
            <h3 class='pre-wrap'>{{ title }}</h3>
            <tbody>
                <tr>
                    <th>checked</th>
                    <th>index</th>
                    <th v-for="header in headers" class='pre-wrap' v-bind:align="header.align">{{header.title}}</th>
                </tr>
                <tr v-for="(row,i) in rows" class='hover-lightblue' @click.prevent='ontrclick(row,i)'
                    :class='{"user-select-none":noselect_text,selected:row.selected}'>
                    <td align="center">{{row.checked?'✔':''}}</td>
                    <td>{{i}}</td>
                    <td v-for="header in headers" class='pre-wrap' v-bind:align="header.align">{{row[header.name]}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <script src='./xxx.js'></script>
</body>

</html>

var newid = (function () {
    var id = 1;
    function _newid() {
        return 'vue-id-' + id++;
    }
    return _newid;
})();

var rows = []
for (let i = 0; i < 20; i++) {
    rows.push({ id: newid(), selected: false, checked: false, key: 'key' + i, value: 'value' + i, });
}


var vm = new Vue({
    el: '#table_template',
    data: {
        title: 'table_test',
        headers: [
            { name: 'key', title: '键', align: 'right' },
            { name: 'value', title: '值', align: 'left' },
        ],
        rows: rows,
        selection_mode: 'add-remove',
        last_click_id: null,
    },
    methods: {
        select_all: function () {
            for (const row of this.rows) {
                row.selected = true;
            }
        },
        unselect_all: function () {
            for (const row of this.rows) {
                row.selected = false;
            }
        },
        toggle_all_selection: function () {
            for (const row of this.rows) {
                row.selected = !row.selected;
            }
        },
        check: function () {
            for (const row of this.rows) {
                if (row.selected) row.checked = true;
            }
        },
        uncheck: function () {
            for (const row of this.rows) {
                if (row.selected) row.checked = false;
            }
        },
        ontrclick: function (row, index) {
            // console.log(JSON.stringify(row));
            // console.log(i);
            selection_mode = this.selection_mode;
            if (selection_mode === 'none') return;
            if (selection_mode === 'single') {
                this.unselect_all();
                row.selected = true;
                return;
            }
            var ids = this.rows.map(x => x.id);
            var perform = function (row) {
                if (selection_mode === 'add-only') {
                    row.selected = true;
                }
                else if (selection_mode === 'remove-only') {
                    row.selected = false;
                }
                else {
                    row.selected = !row.selected;
                }
            }
            if (event.shiftKey) {
                if (this.last_click_id) {
                    var j = ids.indexOf(this.last_click_id);
                    var k = index;
                    if (j >= 0 && k >= 0) {
                        if (j <= k) {
                            for (let i = j + 1; i <= k; i++) {
                                perform(rows[i]);
                            }
                        }
                        else {
                            [j, k] = [k, j];
                            for (let i = j; i < k; i++) {
                                perform(rows[i]);
                            }
                        }
                        this.last_click_id = null;
                    }
                }
            }
            else {
                perform(rows[index]);
                this.last_click_id = row.id;
            }
        }
    },
    computed: {
        noselect_text: function () {
            return this.selection_mode !== 'none';
        },
        selected_row: function () {
            for (const row of this.rows) {
                if (row.selected) return row;
            }
        },
        selected_rows: function () {
            return this.rows.filter(r => r.selected);
        },
        selected_id: function () {
            return selected_row.id;
        },
        selected_ids: function () {
            selected_rows.map(x => x.id);
        },
        selected_index: function () {
            return this.rows.indexOf(this.selected_row);
        },
        selected_indexes: function () {
            return this.selected_rows.map(r => this.rows.indexOf(r));
        },
        checked_rows: function () {
            return this.rows.filter(r => r.checked);
        },
        checked_ids: function () {
            return this.checked_rows.map(r => r.id);
        }
    }
});