美文网首页
ant-design-vue 使用问题记录

ant-design-vue 使用问题记录

作者: ll66_ | 来源:发表于2021-03-22 14:30 被阅读0次

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",不给设置会如图,收缩不全

bug图.png
列子:
<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设置
     ],
  }
}

相关文章

网友评论

      本文标题:ant-design-vue 使用问题记录

      本文链接:https://www.haomeiwen.com/subject/ydpzcltx.html