1、改变select 三角按钮图标
1.使用 suffixIcon 参数 =》slot 放在自定义的icon或标签上
列子:<i class="iconfont iconcascader-full" slot="suffixIcon"></i>
2、menu菜单栏不能收起展开问题,使用inlineCollapsed无效
1.需配合 a-layout-sider中collapsible一起使用
<a-layout id="components-layout-demo-custom-trigger">
<a-layout-sider v-model="collapsed" :trigger="null" collapsible>
<div class="logo" />
<a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
<a-menu-item key="1">
<a-icon type="user" />
<span>nav 1</span>
</a-menu-item>
<a-menu-item key="2">
<a-icon type="video-camera" />
<span>nav 2</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header style="background: #fff; padding: 0">
<a-icon
class="trigger"
:type="collapsed ? 'menu-unfold' : 'menu-fold'"
@click="() => (collapsed = !collapsed)"
/>
</a-layout-header>
<a-layout-content
:style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
>
Content
</a-layout-content>
</a-layout>
</a-layout>
2.menu 中自定义图标收缩显示有问题,还需注意 给自定义icon添加class = "antion",不给设置会如图,收缩不全
列子:
<a-menu-item :key="item.key">
<span class="anticon"><span :class="`iconfont ${item.icon}`" /></span>
<span>{{item.name}}</span>
</a-menu-item>
3、table 二次封装后 slot-scope传递参数使用问题
c组件
<a-table
:row-selection="rowSelection"
:columns="columns"
:bordered="border"
:data-source="tableData"
:loading="loading"
:pagination="JSON.stringify(paginationNum)=='{}'?false:pagination"
:scroll="scroll"
:rowKey="(record, index) => index+''"
:scopedSlots="$scopedSlots"
@onChange="onChange"
>
//*用column.scopedSlots判断外部slot customRender是否有值,将record绑定传给外部父组件
<template v-for="column in columns" :slot="column.scopedSlots?column.scopedSlots.customRender:''" slot-scope="text,record" >
<slot :name="column.scopedSlots?column.scopedSlots.customRender:''" v-bind="record" ></slot>
</template>
</a-table>
a页面
<c-table :tableData="tableData" :columns="roleColumn" :loading="dataLoading" :paginationNum="{}">
<template slot="operator" slot-scope="record">
{{record}} //可获取该行tableData数据
</template>
</c-table>
data(){
return {
roleColumn:[
{dataIndex:'name',title:'名称'},
{dataIndex:'roleId',title:'内容'},
{dataIndex:'describe',title:'权限',width:"50%",scopedSlots: { customRender: "operator" }}//通过scopedSlots.customRender设置
],
}
}