vxe-table表头添加icon图标
时间: 2023-10-12 21:21:10 浏览: 984
要为vxe-table表头添加icon图标,可以使用vxe-icon组件。
1. 首先,在需要添加icon的表头列定义中,添加一个type属性,用于指定icon的类型。例如,可以将type设置为“search”表示搜索图标。
```html
<vxe-table-column field="name" title="姓名" type="search"></vxe-table-column>
```
2. 然后,在表头列定义中,使用vxe-icon组件来显示icon。可以将vxe-icon作为表头列的title属性的一部分,或者作为表头列的scopedSlots属性的一部分。
```html
<!-- 在title中添加vxe-icon组件 -->
<vxe-table-column field="name" title="姓名 <vxe-icon type='search'></vxe-icon>"></vxe-table-column>
<!-- 在scopedSlots中添加vxe-icon组件 -->
<vxe-table-column field="name" title="姓名" :scopedSlots="{header: 'searchIcon'}"></vxe-table-column>
<script>
export default {
methods: {
searchIcon() {
return <vxe-icon type="search"></vxe-icon>
}
}
}
</script>
```
在第二种方法中,需要在组件的methods属性中定义一个名为searchIcon的方法,该方法返回一个vxe-icon组件。然后将此方法分配给表头列的scopedSlots属性,这样它将在表头中显示。
使用以上两种方法,可以将任何类型的icon添加到vxe-table表头中。
阅读全文
相关推荐















