2025-36st-w-日常开发总结

实现自定义表头展示功能踩坑

前言:碰到的原因就是某个表格新增了字段，但是没确定字段，我就复制最后一个表头，只改了title,没改key(acro-design a-table对应的是dataIndex)， 然后筛选表头，重新赋值给column时，就出现了表格的固定列都可以滚动，而且右边很多留白的问题

最后排查发现：如果是第一次展示表头，并且带有fixed列，存在相同的dataIndex，展示时不会有问题，在于后续筛选表头后，由于存在相同的dataIndex，就会出现上述问题。将重复的dataIndex都改为不同就可以随便给columns赋值了

请求响应体偶尔会出现content-type 从application/json,变为 text/plain

经排查发现是我跟测试恰好操作同一条记录，但是后端并没有处理这种情况，导致返回的结果异常，没有返回值。 于是promise.then() 无法正确进入从而报错

acro-design a-table 支持table-column 传递额外数据自用

20250918更新- 有个titleSlotName 属性可以用于自定义表头格式！！！

<template #title>
//这里自定义表头的样式的时候，可以通过传递额外数据，在这里用到
  <div v-if="item.slotName === 'custom-action'">
    <div style="display: flex; align-items: center">
      <span>{{ item.title }}</span>
      <span style="color: #ccc; padding: 0 15px">|</span>
      <img
        :src="setTh"
        alt="set"
        style="cursor: pointer"
        @click="item.onClick"
      />
    </div>
  </div>
  <span v-else>{{ item.title }}</span>
</template>


const columns = ref([
  ...dyCols.value,
  {
    title: "操作",
    slotName: "custom-action",
    align: "left",
    fixed: "right",
    width: 140,
    colData: involvedAccountCol.value,
    onClick: () => {
      state.headerVisible = true;
    }
  }
]);