<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: '上海市普陀區(qū)金沙江路 1518 弄',
                isVague:false
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1517 弄',
                isVague:false
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 1519 弄',
                isVague:true
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀區(qū)金沙江路 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>