table的多选行点击和取消事件，复选框选中和取消事件，利用this.$refs.table.selection以及状态变化事件和行点击事件触发，代码简洁，简单

最新推荐文章于 2024-05-31 11:49:06 发布

weixin_42024333

最新推荐文章于 2024-05-31 11:49:06 发布

阅读量1.9k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_42024333/article/details/134202903

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <!-- 处理table的复选框选中和取消选中，包含多个表格的情况
         1.首先要确认时选中还是取消选中，这个可以通过判断当前行是否在选中的数组中来判断    
    -->
    <!-- 处理table至少选择一个，当table剩下最后一个的时候，不允许取消 -->
    <div id="app">
        <el-table ref="multipleTable1" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange"  @row-click="(a,b,c)=>{rowClick(a,b,c,1)}">
            <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 style="margin-top: 20px">
            <el-button>切换第二、第三行的选中状态</el-button>
            <el-button>取消选择</el-button>
        </div>
        <el-table ref="multipleTable2" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange" @row-click="(a,b,c)=>{rowClick(a,b,c,2)}">
            <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>
        <el-table ref="multipleTable3" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange"  @row-click="(a,b,c)=>{rowClick(a,b,c,3)}">
            <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>
        <el-table ref="multipleTable4" :data="tableData" tooltip-effect="dark" style="width: 100%"
            @selection-change="handleSelectionChange" @select="handleSelect" @row-click="(a,b,c)=>{rowClick(a,b,c,4)}">
            <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>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                selectionAll:[],
                lastTableName: '',
                selection: [],
                visible: false,
                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 弄'
                }, {
                    date: '2016-05-06',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }, {
                    date: '2016-05-07',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
            }
        },
        methods: {
            rowClick(row, column, event,index) {
                // this.$refs[this.lastTableName].toggleRowSelection(row, true)
                console.log('4.  ', row, column, event,index,123)
                this.$refs['multipleTable'+index].toggleRowSelection(row)
            },
            // 状态发生变化时触发
            handleSelectionChange(val) {
                console.log(this.$refs, 'multipleTable');
                console.log('1.', val);
                this.selectionAll = []
                for (let key in this.$refs) {
                    if (this.$refs[key].selection.length > 0) {
                        // console.log('5     ',key)
                        this.lastTableName = key
                        this.$refs[key].selection.forEach(item => {
                            this.selectionAll.push(item.name)
                            console.log('222.  ', this.selectionAll)
                        })
                    }

                }
            },
          

        },
    })
</script>

</html>

weixin_42024333

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
table的多选行点击和取消事件，复选框选中和取消事件，利用this.$refs.table.selection以及状态变化事件和行点击事件触发，代码简洁，简单

【代码】table的多选行点击和取消事件，复选框选中和取消事件，利用this.$refs.table.selection以及状态变化事件和行点击事件触发，代码简洁，简单。
复制链接

扫一扫