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

Question

第一个图片链接是我的要求。我不应该在网格中显示一些字段。所以我使用CSS模糊了字段   第二个图像链接是问题。当我选择CTRL + A或从鼠标中选择值时，会显示模糊的字段。

请帮助!!!

Answer 1

您可以在这些user-select: none元素上设置td，以防止它们被选中。

请注意，user-select需要-webkit和-moz前缀。

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;