vxe-table 如何自定义排序图标按钮，自定义排序
<p>vxe-table 如何自定义排序图标按钮，自定义排序</p><p>查看官网：https://vxetable.cn<br>
gitbub：https://github.com/x-extends/vxe-table<br>
gitee：https://gitee.com/x-extends/vxe-table</p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202511/3563285-20251103110054923-1123453088.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202511/3563285-20251103110108995-1447398489.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202511/3563285-20251103110128018-945946441.png"></p>
<p><img src="https://img2024.cnblogs.com/blog/3563285/202511/3563285-20251103110137889-2052604939.png"></p>
<p>使用表头排序按钮插槽 sort 来自定义模板</p>
<pre><code class="language-html"><template>
<div>
<vxe-grid ref="gridRef" v-bind="gridOptions">
<template #nameSort="{ column }">
<vxe-button mode="text" title="点击排序" :status="column.order ? 'primary' : ''" :icon="column.order === 'desc' ? 'vxe-icon-sort-alpha-desc' : 'vxe-icon-sort-alpha-asc'" @click="sortEvent(column.field, column.order)"></vxe-button>
</template>
<template #numSort="{ column }">
<vxe-button mode="text" title="点击排序" :status="column.order ? 'primary' : ''" :icon="column.order === 'desc' ? 'vxe-icon-sort-numeric-desc' : 'vxe-icon-sort-numeric-asc'" @click="sortEvent(column.field, column.order)"></vxe-button>
</template>
</vxe-grid>
</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
const gridRef = ref()
const gridOptions = reactive({
border: true,
columns: [
{ type: 'seq', width: 70 },
{ field: 'name', title: 'Name', width: 200, sortable: true, slots: { sort: 'nameSort' } },
{ field: 'sex', title: 'Sex' },
{ field: 'num', title: 'Number', sortable: true, slots: { sort: 'numSort' } },
{ field: 'age', title: 'Age' },
{ field: 'address', title: 'Address' }
],
data: [
{ id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, num: 100, address: 'test abc' },
{ id: 10002, name: 'Test3', role: 'Test', sex: '1', age: 22, num: 234, address: 'Guangzhou' },
{ id: 10003, name: 'Test5', role: 'PM', sex: '0', age: 32, num: 12, address: 'Shanghai' },
{ id: 10003, name: 'Test4', role: 'Test', sex: '1', age: 8, num: 10, address: 'Shanghai' }
]
})
const sortEvent = (field, order) => {
const $grid = gridRef.value
if ($grid) {
// 触发事件用 setSortByEvent
$grid.setSort({
field,
order: order === 'desc' ? 'asc' : (order === 'asc' ? null : 'desc')
}, true)
}
}
</script>
</code></pre>
<p>https://gitee.com/x-extends/vxe-table</p><br><br>
来源：https://www.cnblogs.com/qaz666/p/19186475
頁:
[1]