vue项目 div span 等没有disabled属性的标签设置禁用（禁止点击）和置灰

div和span是一样的，这里仅以span做演示

首先动态添加notClick的样式：

 <span :class="{notClick:isNotClick}"  @click="handleDel(scope.row)">删除</span>

.notClick {
  // pointer-events: none;
  color:grey;
  cursor:not-allowed;
}

这里遇到一个知识点，pointer-events:none和cursor: not-allowed不能同时用 也就是禁止点击和鼠标的红圈加斜杠不能同时在css中设置，那么我们只能转而向js求助。

通过在点击事件中判断是否禁用点击：

 handleDel(data) {
     if(data.status){
        return;
    }

我这里是通过判断数据中的状态如果为1也就是同步成功了，就禁用点击删除。

显示结果如下：

至此，问题得以解决。