グリッドからグリッド値を選択すると、ぼやけた値が表示される

Question

最初の画像リンクが私の必要条件です。グリッドに表示しないでください。だから私はCSSを使用してフィールドをぼかしている 2番目の画像のリンクです。 CTRL + Aを選択するか、マウスから値を選択すると、ぼやけたフィールドが表示されます。

助けてください！

Answer 1

user-select: noneをtd要素に設定して、それらが選択されないようにすることができます。

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>