ANT DESIGN VUE 中树形控件勾选框改造，多选变单选

一、遇到问题：

有个需求，是要把属性控件的勾选框改变，从正方形的多选变成圆形单选。话不多说，上图

1、官方文档案例：

这是很明显的多选，正方形勾选框。详细地址：Ant Design Vue

2、需求文档案例：

我这里采取的是改变树形组件勾选框的样式，并且通过api提供的信息设置成单选，结果如上图。父子之间不关联。

3、实现

下面是调研时候的html代码，我这里使用的是可以拖拽的树形控件，加上单选功能

html部分

<a-tree
                  class="draggable-tree"
                  v-model="checkedKeys" //勾选数据
                  :default-expanded-keys="expandedKeys" //（受控）展开指定的树节点
                  :auto-expand-parent="autoExpandParent" //是否自动展开父节点
                  :selected-keys="selectedKeys" //   （受控）设置选中的树节点
                  :checkStrictly="checkStrictly" //  checkable 状态下节点选择完全受控（父子节点选中状态不再关联）
                  draggable   // 设置节点可拖拽
                  checkable   //节点前添加 Checkbox 复选框
                  :tree-data="gData"   // 树形控件数据
                  @dragenter="onDragEnter"  //拖拽前
                  @drop="onDrop"  // 拖拽后
                />

通过css修改 复选框样式

/deep/.ant-tree-checkbox-inner {
  border-radius: 50%;
}
/deep/.ant-tree-checkbox-checked .ant-tree-checkbox-inner {
  background: #ffffff;
}
/deep/.ant-tree-checkbox-checked .ant-tree-checkbox-inner::after {
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #1890ff;
  border: 0;
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  content: " ";
}
/deep/.ant-tree-checkbox-checked .ant-tree-checkbox-inner:hover {
  border: 0px;
}

 js部分提供数据，和各种操作事件

<script>
const x = 3;
const y = 2;
const z = 1;
const gData = [];

const generateData = (_level, _preKey, _tns) => {
  const preKey = _preKey || "0";
  const tns = _tns || gData;

  const children = [];
  for (let i = 0; i < x; i++) {
    const key = `${preKey}-${i}`;
    tns.push({ title: key, key });
    if (i < y) {
      children.push(key);
    }
  }
  if (_level < 0) {
    return tns;
  }
  const level = _level - 1;
  children.forEach((key, index) => {
    tns[index].children = [];
    return generateData(level, key, tns[index].children);
  });
};
generateData(z);

export default {
data(){
      gData,
      expandedKeys: [],
      autoExpandParent: false,
      checkStrictly: true,
      checkedKeys: [],
      selectedKeys: [],},
watch: {
  //通过该方法可控制选择一项，实现单选
    checkedKeys(val) {
       if (val.checked.length > 1) {
         
          val.checked.halfChecked = val.checked.shift();
        }
      console.log("onCheck", val);
    },
  },
methods: {
      
    onDragEnter(info) {
      console.log(info);
      // expandedKeys 需要受控时设置
      // this.expandedKeys = info.expandedKeys
    },
    onDrop(info) {
      console.log(info.dragNodesKeys);
      const dropKey = info.node.eventKey;
      const dragKey = info.dragNode.eventKey;
      const dropPos = info.node.pos.split("-");
      const dropPosition =
        info.dropPosition - Number(dropPos[dropPos.length - 1]);
      const loop = (data, key, callback) => {
        data.forEach((item, index, arr) => {
          if (item.key === key) {
            return callback(item, index, arr);
          }
          if (item.children) {
            return loop(item.children, key, callback);
          }
        });
      };
      const data = [...this.gData];

      // Find dragObject
      let dragObj;
      loop(data, dragKey, (item, index, arr) => {
        arr.splice(index, 1);
        dragObj = item;
      });
      if (!info.dropToGap) {
        // Drop on the content
        loop(data, dropKey, (item) => {
          item.children = item.children || [];
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.push(dragObj);
        });
      } else if (
        (info.node.children || []).length > 0 && // Has children
        info.node.expanded && // Is expanded
        dropPosition === 1 // On the bottom gap
      ) {
        loop(data, dropKey, (item) => {
          item.children = item.children || [];
          // where to insert 示例添加到尾部，可以是随意位置
          item.children.unshift(dragObj);
        });
      } else {
        let ar;
        let i;
        loop(data, dropKey, (item, index, arr) => {
          ar = arr;
          i = index;
        });
        if (dropPosition === -1) {
          ar.splice(i, 0, dragObj);
        } else {
          ar.splice(i + 1, 0, dragObj);
        }
      }
      this.gData = data;
      this.$message.success(info.dragNodesKeys + "资源节点移动成功");
    },

    onCheck(checkedKeys) {
      console.log("onCheck", checkedKeys);
      this.checkedKeys = checkedKeys;
    },}

}



</script>