antd

修改 a-table 表头

试了很多错 最后终于实现了（一定得外边使用:deep,针对 vue3）

:deep(.ant-table-container table > thead > tr) {
    th {
      background-color: whitesmoke;
    }
  }

文件导入参数问题

  1. 当导入文件的接口中需要添加多个参数时：需要通过 formData.append（‘参数’，值） 把参数以及值逐步添加进去。
const formData = new FormData()
formData.append('参数1'，参数1对应值)
formData.append('参数2'，参数2对应值)
  1. 设置请求体
importCtrApi = () => {
   return post({
      url: IMPORT_CTR,
      formData,
   })
}
  1. 再设置请求头
headers:{
	'Content-Type': 'multipart/form-data',
}

不能直接给 reactive 赋值

  1. 之前在开发时候遇到一个问题:我用一个 reactive 包裹的对象来确定一个图标是否显示隐藏，在一个切换操作中我直接把这个对象赋值为{} 最后导致在点击切换的时候，数据发生改变，但是视图更新出现了问题，鼠标点击按钮切换，如果鼠标光标一直在改图标，视图永远不更新，只要光标移除图标，按钮图标就会更新。
//问题数据
const badData = reactive({})
badData = {} //这样赋值不规范，会破坏reactive的响应式，因为reactive是使用poxy进行代理，如果直接赋值就破坏了poxy

//正确做法
const badData = reactive({
   name: '',
})
badData.name = '***'

antd 树形结构（a-tree）配置说明

dropToGap(boolean)

表示是否拖动到了节点之间缝隙，true代表拖动到节点之间的缝隙，反之为false，则是拖动到节点内部

dropPosition(number)

表示拖动到的当前节点的相对位置
  1. 当拖动到目标元素上面缝隙：dropPosition= 目标元素相对（相对父节点的索引）位置，例如：想要插入到第三个元素（index=2）之前，那么dropPosition=2,相当于插入，把原来第三个元素的位置占用，此时dropToGap=true
  2. 当拖动元素到目标元素下面缝隙：dropPosition= 目标元素相对（相对父节点的索引）位置+1，例如：想要插入到第三个元素（index=2）之后，那么dropPosition=3,此时dropToGap=true
  3. 当拖动元素到目标元素之内：dropPosition= 目标元素内容相对（相对父节点的索引）位置，例如：想要插入到第三个元素（index=2）之内，那么dropPosition=2,此时dropToGap=false

    ！！封装简易的s-table

antd-select失去焦点问题,

<div>
	<a-select
		autofocus
		defaultOpen
		v-if="column.key === 'policy'"
		v-model:value="editData[record.id].policy"
		class="w-full"
		@blur="onCancleSelect"
		@dropdownVisibleChange="(open:boolean)=>onDrop(open,record.policy,editData[record.id].policy)"
>	
		 <a-select-option
			 v-for="option in record.policyRange"
			 :key="option"
			 :value="option"
>			
			 <span :title="option"></span>
		  </a-select-option>
  </a-select>
	<a-select
	  autofocus
	  defaultOpen
	  v-if="column.key === 'value' && record.isEnumValueType"
	  v-model:value="editData[record.id].value"
	  class="w-full"
	  @blur="onCancleSelect"
	  @dropdownVisibleChange="(open:boolean)=>onDrop(open,record.value,editData[record.id].value)"
>	
	  <a-select-option
		v-for="option in record.valueRange"
		:key="option"
		:value="option"
>	
		<span :title="option"></span>
	  </a-select-option>
	</a-select>
	<a-input
	  v-click-outside:record="{ editData, record, indexName: '' }"
	  v-show="column.key === 'value' && !record.isEnumValueType"
	  v-model:value="editData[record.id].value"
	  @blur.prevent="onBlur"
	/>
</div>

其中可以看到每个组件都会有blur失去焦点事件，并且这些组件都在一个div中通过条件判断（v-show）其显示隐藏。

  1. 如果用v-show会出现问题：当我双击输入框对应文本想要修改输入框内的内容时，默认我让输入框出现之后聚焦在文内，如果再一次点击焦点处，会再一次触发失去焦点的事件，但是我点击的焦点内部，并没有失去焦点，百思不得其解，然后我把该输入框的失去焦点事件去除之后，发现点击输入框内部还是会触发焦点失去事件。
  2. 这个失去焦点的事件其实是我通过v-show隐藏的其他组件的焦点失去事件，导致点击输入框的内部其实是点击了其他组件的失去焦点，所有会这样子，因此让元素显示隐藏不能用v-show实现，只能让元素销毁或者创建这样每次只会触发一个元素的事件，因此用v-if。