element-table 隐藏某几行

最新推荐文章于 2025-06-27 16:25:29 发布

HainesFreeman

最新推荐文章于 2025-06-27 16:25:29 发布

阅读量4.1k

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/weixin_41829196/article/details/127863002

vue 同时被 2 个专栏收录

119 篇文章

订阅专栏

业务

67 篇文章

订阅专栏

本文展示了如何在Vue.js项目中，结合Element UI库，通过监听表格选择状态，实现当勾选特定选项时隐藏或显示特定行的效果。主要涉及：`el-table`的`row-class-name`属性、条件渲染和自定义样式来控制行的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想实现以下效果：

勾选时候的状态：

未勾选的状态：

解决方案：

利用这个el-table这个属性设置：

:row-class-name="rowClassName" //回调行 的样式，通过这个回调放法控制隐藏显示

完整代码：

<template>
    <div class="app-container">
        <el-table :data="records" ref="multipleTable"
            border fit
            highlight-current-row style="width: 100%;" :cell-style="{ padding: '3px' }" :row-class-name="rowClassName">
            <el-table-column type="selection" align="center">
            </el-table-column>
            <el-table-column label="名称" prop="key" align="center">
                <template slot-scope="scope"><span>{{ scope.row.name }}</span></template>
            </el-table-column>
            <el-table-column label="修改时间" prop="name" align="center">
                <template slot-scope="scope"><span>{{ scope.row.updateTime }}</span></template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="{row}">
                    <el-button v-if="row.type === 'button'">重置</el-button>
                    <el-checkbox label="" v-model="row.a" v-else @change="checkChange(row)"></el-checkbox>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
export default {
    name: 'User',
    data() {
        return {
            records: [{
                id: 1,
                name: '所有人',
                updateTime: '2022-10-1',
                a: ''
            }, {
                id: 2,
                name: '其它',
                updateTime: '2022-10-3',
                a: ''
            }, {
                id: 3,
                name: '用户',
                updateTime: '2022-10-4',
                a: '',
                type: 'button'
            }, {
                name: '组织',
                updateTime: '2022-10-5',
                a: '',
                type: 'button'
            }, {
                name: '岗位',
                updateTime: '2022-10-6',
                a: '',
                type: 'button'
            }],
            isShow: false,
        }
    },
    methods: {
        checkChange(row) {
            if (row.name === '其它' && row.a) {
                this.isShow = true
                this.rowClassName({ 'row': row })
            } else {
                this.isShow = false
                this.rowClassName({ 'row': row })
            }
            console.log(row, '---row---')
        },
        rowClassName: function ({ row }) {
            if (!this.isShow) {
                return;
            }
            if (['用户', '组织', '岗位'].includes(row.name)) {
                return "showRow";
            }
        }
    }
}
</script>
<style scoped lang="scss">
::v-deep .showRow {
    display: none;
}
</style>