ant-design中a-table的插槽简单整理

最新推荐文章于 2024-10-12 14:48:15 发布

原创最新推荐文章于 2024-10-12 14:48:15 发布 · 2.2k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

文章介绍了如何在使用AntDesign的a-table组件时配置分页功能，包括设置数据源、滚动条、列属性等。同时，展示了如何利用插槽进行自定义渲染，如添加序号、根据内容显示不同颜色以及悬浮提示框的功能。

导入ant-design之后，使用a-table

a-table配置为：

<a-table
    :data-source="dataSource"
    :scroll="{ x: '100%' }"
    :columns="columns"
    :pagination="{
         current: pagination.current,
         total: pagination.total,
         showSizeChanger: true,
         pageSizeOptions: ['10'],
         buildOptionText: (pageSizeOptions) => `${pageSizeOptions.value}条/页`,
         showTotal: (total) => `共 ${total} 条`,
         onShowSizeChange: onShowSizeChange,
         onChange: handleTableChange,
     }"
     :rowClassName="rowClassName"
     @change="onShowSizeChange"
     rowKey="id"
>

pagination在data中设置为：

pagination: {
        current: 1, //当前第几分页
        pageSize: 10, //一次展示多少数据
        total: 0, //总共多少数据
        pageSizeOptions: ["10"], //可选择展示多少数据
        showTotal: (total) => `共${total}条`,
        showSizeChanger: true, //是否展示切换器
        showQuickJumper: true, //是否可以快速调整至某页
      },

dataSource在需要动态添加时设置为空就可。

改变页码实现分页查的变化：

onShowSizeChange(pagination) {
      this.pagination.current = pagination.current;
      this.pagination.pageSize = pagination.pageSize;
      this.getList(this.pagination.current);//分页查
    },

在data的columns中给要添加插槽的表头写成：

columns:[
{
    title: "序号",
    dataIndex: "idx",
    scopedSlots: { customRender: "idx" },
},
{
    title: "title",
    dataIndex: "dataIndex",
    scopedSlots: { customRender: "dataIndex" },
},
{
    title:"title2",
    dataIndex:"dataIndex2",//无需插槽
}]

简单说明几种情况：

当需要在表格中添加序号时：

<span slot="idx" slot-scope="text, record, index">
    {{
        (pagination.current - 1) * pagination.pageSize +parseInt(index) +1}}
</span>

当需要根据返回的内容显示不同的颜色时：

<span slot="status" slot-scope="status">
          <div style="color: green" v-if="status == '同意'">
            {{ status }}
          </div>
          <div style="color: red" v-else-if="status == '驳回'">
            {{ status }}
          </div>
          <div style="color: orange" v-else-if="status == '审批中'">
            {{ status }}
          </div>
          <div style="color: orange" v-else>--</div>
        </span>

当需要鼠标悬浮显示提示框时：

<span slot="stockYjNewPartsName" slot-scope="text, record">
          <a-tooltip>
            <template slot="title">
              {{ text }}
            </template>
            {{ text }}
          </a-tooltip>
        </span>