Descriptions - 描述列表

Descriptions 列表组件，提供一个更加方便快速的方案来构建描述列表。 开发中免不了需要定义一些雷同的属性，支持了 columns 列展示的逻辑，支持与插槽混用。 封装了请求网络的行为，Descriptions 会将 props.params 中的数据默认带入到请求中，如果接口恰好与我们的定义相同，实现一个查询会非常简单。

---

• Descriptions.Item 只是一个语法糖，不参与实际的渲染。

基本用法

显示代码

import { defineComponent } from 'vue'
import { Button, Card } from 'ant-design-vue'
import { default as Descs } from '@/components/descriptions'

export default defineComponent({
    setup () {
        function request () {
            return new Promise((resolve) => {
                setTimeout(() => {
                    const data = {
                        switch: true,
                        slider: [10, 90],
                        number: 9010,
                        textarea: '这是一段文本',
                        text: '文本',
                        date: Date.now(),
                        dateRange: [Date.now(), Date.now()]
                    }
                    resolve({ data })
                }, 1000)
            })
        }

        return () => {
            return (
                <Card>
                    <Descs
                        title={'Descriptions'}
                        request={request}
                        size={'small'}
                        v-slots={{
                            extra: () => {
                                return [<Button>链接</Button>, <Button>链接</Button>]
                            }
                        }}
                    >
                        <Descs.Item
                            label={'switch'}
                            name={'switch'}
                            valueType={'switch'}
                        />
                        <Descs.Item
                            label={'slider'}
                            name={'slider'}
                            valueType={'slider'}
                        />
                        <Descs.Item
                            label={'number'}
                            name={'number'}
                            valueType={'number'}
                        />
                        <Descs.Item
                            label={'textarea'}
                            name={'textarea'}
                            valueType={'textarea'}
                        />
                        <Descs.Item
                            label={'text'}
                            name={'text'}
                            valueType={'text'}
                            v-slots={{ a: () => '111' }}
                        />
                        <Descs.Item label={'test'}>
                            123
                        </Descs.Item>
                        <Descs.Item
                            label={'date'}
                            name={'date'}
                            valueType={'date'}
                        />
                        <Descs.Item
                            label={'dateRange'}
                            hide={true}
                            name={'dateRange'}
                            valueType={'dateRange'}
                        />
                    </Descs>
                </Card>
            )
        }
    }
})

Columns 形式

显示代码

import { defineComponent } from 'vue'
import { Button, Card } from 'ant-design-vue'
import { default as Descs } from '@/components/descriptions'

export default defineComponent({
    setup () {
        function request () {
            return new Promise((resolve) => {
                setTimeout(() => {
                    const data = {
                        switch: true,
                        slider: [10, 90],
                        number: 9010,
                        textarea: '这是一段文本',
                        text: '文本'
                    }
                    resolve({ data })
                }, 1000)
            })
        }

        return () => {
            return (
                <Card>
                    <Descs
                        title={'Descriptions'}
                        request={request}
                        size={'small'}
                        columns={[
                            {
                                title: 'switch',
                                dataIndex: 'switch',
                                valueType: 'switch',
                            },
                            {
                                title: 'slider',
                                dataIndex: 'slider',
                                valueType: 'slider',
                            },
                            {
                                title: 'number',
                                dataIndex: 'number',
                                valueType: 'number',
                            },
                            {
                                title: 'textarea',
                                dataIndex: 'textarea',
                                valueType: 'textarea',
                            },
                            {
                                title: 'text',
                                dataIndex: 'text',
                                valueType: 'text',
                                hideInDescriptions: true
                            }
                        ]}
                    />
                </Card>
            )
        }
    }
})

API

属性

属性	说明	类型	默认值
dataSource	数据	object	-
columns	配置项	array	-
emptyText	空数据时的展示	string	-
request	数据获取	(params) => { success, data })	-

事件

事件名称	说明	回调参数
onLoad	成功回调	function(value)
onRequestError	失败回调	function(error)