當我從網格中選擇網格值時，模糊值得到顯示

Question

第一個圖像鏈接是我的要求。一些字段我不應該出現在網格中。所以我通過使用CSS模糊了字段 第二個圖像鏈接是問題。當我選擇CTRL + A或從鼠標中選擇值時，模糊的字段會顯示。

請幫忙!!!

Answer 1

您可以在這些td元素上設置user-select: none以防止它們被選中。

請注意user-select需要-webkit和-moz前綴。

const app = new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    items: [{ 
 
     col1: "123", 
 
     col2: "456" 
 
    },{ 
 
     col1: "789", 
 
     col2: "012" 
 
    }] 
 
    } 
 
});

.no-select { 
 
    user-select: none; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
} 
 

 
.blur { 
 
    filter: blur(3px); 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script> 
 
<div id="app"> 
 
    <table> 
 
    <thead> 
 
     <tr> 
 
     <th>Col1</th> 
 
     <th>Col2 (with no-select)</th> 
 
     <th>Col2 (without no-select)</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr v-for="item in items"> 
 
     <td>{{ item.col1 }}</td> 
 
     <td class="no-select blur">{{ item.col2 }}</td> 
 
     <td class=" blur">{{ item.col2 }}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>