当我从网格中选择网格值时，模糊值得到显示

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>