element表格數(shù)據(jù)部分模糊的實(shí)現(xiàn)代碼
更新時(shí)間：2024年01月05日 09:40:15 作者：霸氣小男
這篇文章給大家介紹了element表格數(shù)據(jù)模糊的實(shí)現(xiàn)代碼,文中有詳細(xì)的效果展示和實(shí)現(xiàn)代碼供大家參考,具有一定的參考價(jià)值,需要的朋友可以參考下
1、效果
2、代碼預(yù)覽
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: '上海市普陀區(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>4、缺陷
雖然是模糊掉了，但是點(diǎn)擊檢查元素依然渲染了數(shù)據(jù)
到此這篇關(guān)于element表格數(shù)據(jù)部分模糊的實(shí)現(xiàn)代碼的文章就介紹到這了,更多相關(guān)element表格數(shù)據(jù)模糊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue 實(shí)現(xiàn)模糊檢索并根據(jù)其他字符的首字母順序排列
這篇文章主要介紹了vue 實(shí)現(xiàn)模糊檢索，并根據(jù)其他字符的首字母順序排列,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
Lottie 是 Vue3 項(xiàng)目中實(shí)現(xiàn)高品質(zhì)動(dòng)畫的最佳選擇之一,通過封裝通用組件可快速集成到項(xiàng)目中,結(jié)合其豐富的 API 能實(shí)現(xiàn)靈活的交互控制,本文來介紹一下Lottie動(dòng)畫庫的使用,通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2026-02-02
vue是一套構(gòu)建用戶界面的漸進(jìn)式框架。這篇文章主要介紹了vue cli的相關(guān)知識，本文給大家及時(shí)的非常全面,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了vue組件props屬性監(jiān)聽不到值變化問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
手摸手教你實(shí)現(xiàn)Vue3 Reactivity
本文主要介紹了手摸手教你實(shí)現(xiàn)Vue3 Reactivity，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了vue父組件異步傳遞props值,子組件接收不到解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
vue3調(diào)度器effect的scheduler功能實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了vue3調(diào)度器effect的scheduler功能實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
在現(xiàn)代前端開發(fā)中,自定義引入依賴是提升開發(fā)效率的關(guān)鍵,unplugin-auto-import插件可以幫助開發(fā)者自動(dòng)引入JS模塊,包括本地編寫的工具方法和第三方庫,通過簡單的配置,開發(fā)者可以實(shí)現(xiàn)Vue基本庫、本地文件以及第三方插件的自動(dòng)引入2024-10-10
在組件中修改vuex中state的具體實(shí)現(xiàn)方法
在組件中修改 Vuex 中的 state,根據(jù)使用的 Vue 版本（Vue 2 或 Vue 3）不同,有不同的操作方式,但總體思路都是借助 Vuex 提供的 mutations 或 actions 來實(shí)現(xiàn),以下分別介紹兩種版本下的具體實(shí)現(xiàn)方法,需要的朋友可以參考下2025-02-02
這篇文章主要給大家介紹了關(guān)于在vue3.0中如何友好使用antdv的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01