element表格数据模糊展示

1、效果

2、代码预览

3、代码

<template>
    <div class="VagueData">
        <el-table :data="tableData" border stripe style="width: 32%" :row-class-name="rowBlurred">
            <el-table-column prop="date" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="180">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
export default {
    data() {
        return {
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄',
                isVague:false
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄',
                isVague:false
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄',
                isVague:true
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄',
                isVague:true
            }]
        }
    },
    methods:{
        rowBlurred({row}){
            console.log(row);
            if(row.isVague){
                return 'vague'
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.VagueData{
    ::v-deep {
        .el-table .vague {
          filter: blur(5px); /* 添加模糊效果 */
        }
      }
}
</style>

4、缺陷

虽然是模糊掉了，但是点击检查元素依然渲染了数据

注：本人前端小白 ，如有不对的地方还请多多指教