2024-10-11 自定义渲染之arco-design-vue table的columns的title ==》使用DOM插入子元素

业务场景如下：

 给表头插入一个必填的符号*，就这么简单的需求。

代码如下：

const elements: any = document.querySelectorAll('.arco-table-th-title');
elements.forEach((a: any) => {
    const item = document.createElement('span');
    item.style.color = 'red';
    item.innerText = '*';
    // a.appendChild(item); // 往后添加
    const firstChild = a.firstChild;
    a.insertBefore(item,firstChild); // 往前添加
})

找到表头的类名.arco-table-th-title，然后用DOM的insertBefore往前插入一个元素即可。

2024-10-11 16:31：发现了一个bug，通过dom插入元素后，如果我给table动态插入一个表头，那么只会显示表字段值，不会显示表头，比如你新增了【类型】，然后你只能看到【类型】对应的值，但是表头却没有出现【类型】二字！

2024-10-12 13:20：我看了arco的文档，终于发现了可以设置表头的slot插槽，原来是叫做titleSlotName，写法同slotName，后者是作用于表体数据的。

具体写法为：

// columns
{
            title: '区域',
            dataIndex: 'DX-0282',
            titleSlotName: 'bitian',
}

// html
<template #bitian="{column,record,index}">
    <div>
        <span style="color: red"">*  </span>
                {{ column.title }}
    </div>
</template>