自定义列,(自我记录)

模板

// el-table 的属性
:header-cell-class-name="headerCellStyleName"
@sort-change="onSortChange"

// <el-table-column
:sortable="column.sortProp ? 'custom' : null"

<SetColumnModal v-model:visible="openSetColumnModal" v-model:columnData="modalColumns" @confirm="confirmColumns" columnType="cgxqd">
</SetColumnModal>

script

 import SetColumnModal from '@/components/WDTable/SetColumnModal.vue'
 import { listColumn } from "@/api/erp/overAll/customColumns/addCustom.js";
 import useCustomColumns from '@/hooks/useCustomColumns'
 const { openSetColumnModal, headerCellStyleName, setColumn, columns, modalColumns } = useCustomColumns()

 // 自定义列
    const getColumnsList = (columnType, refreshList = true) => {
        console.log(refreshList, 'refreshList');
        loading.value = true;
        listColumn({ columnType }).then(res => {
            columns.value = res.data.columnsVOList
            modalColumns.value = res.data.customerFormVOList
            if (refreshList) {
                getList();
            } else {
                loading.value = false;
            }
        })
    }
    getColumnsList('cgxqd')
    const confirmColumns = () => {
        getColumnsList('cgxqd', false)
    }

    // 后端排序
    const onSortChange = ({ prop, order }) => {
        const sortProp = columns.value.find(item => item.prop === prop)?.sortProp
        queryParams.value.sortField = order ? sortProp : order;
        queryParams.value.sortOrder = order ? order == 'ascending' ? 'asc' : 'desc' : order
        getList()
    }