ant-design-vue 中的table某列修改风格

1)一个checkboxgroup 希望把打勾变成打叉；

找到效果位置，查看是通过动画旋转实现的打勾,实际把一个直角∟通过旋转偏移实现✔效果；

.ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #fff;  //显示边框部分
  border-top-width: 2px;
  border-top-style: solid;
  border-top-color: rgb(255, 255, 255);
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: rgb(255, 255, 255);
  border-left: 0;
  border-top: 0;
  content: " ";
  display: table;
  opacity: 1;
  position: absolute;
  transform: rotate(45deg) scale(1) translate(-50%,-50%); //旋转偏移
  transition: all .2s cubic-bezier(.12,.4,.29,1.46) .1s;  //动画效果 
}

2）看到上面conent留空，直接在浏览器调试里面尝试，并设置颜色，关闭动画可行；

打叉用X表示；

:deep(.ant-checkbox-checked) .ant-checkbox-inner::after {
    border: none;
    border-left: 0;
    border-top: 0;
    content: "X";
    display: table;
    height: 9.14285714px;
    left: 21.5%;
    opacity: 5;
    position: absolute;
    top: 40%;
    transform: translate(0, -50%);
    transition: none;
    width: 5.71428571px;
    color: white;
}

3)由于部分页面还需要原来的✔效果，所以只对特定控件生效；

3.1）通过设置id号，用id来做选择器；

#xxxcheckgroup :deep(.ant-checkbox-checked) .ant-checkbox-inner::after {
....
}

3.2)对于table中的控件处理；

table中有2列有checkboxgroup,一列要生效一列用原来的效果；

3.2.1）用简单的方法，在父组件上添加一个class，效果为空，然后选择其子元素；

html:

<div class="p-checkbox-group">
    <a-checkbox-group  v-model:value="record" :options="Options" />
</div>


style:

.p-checkbox-group {}


.p-checkbox-group :deep(.ant-checkbox-checked) .ant-checkbox-inner::after {
...
}

3.2.2用table中的列选择,此处5为第五列;

:deep(tbody>tr>td:nth-child(5) .ant-checkbox-checked) .ant-checkbox-inner::after {
...
}

嗯，css不是很熟悉，搞了好久。