iview动态显示表格数据进阶版

最新推荐文章于 2024-05-07 13:57:22 发布

ljn1289532768

最新推荐文章于 2024-05-07 13:57:22 发布

阅读量810

点赞数

分类专栏：前端文章标签： javascript vue.js css3 iview table

本文链接：https://blog.csdn.net/ljn1289532768/article/details/122453439

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

如何在js部分花样显示表格数据

1.表头渲染(在表头后面添加Tooltip）

直接展示图
这是系统中中比较常见的类型

columns1: [
    {
        title: 'Name',
        key: 'name',
        renderHeader: (h, column) => {
            return h('Tooltip', {
                    props: {
                        content: '*******************',
                        placement: 'top',
                        transfer: true
                    }
                },
                [
                    column.column.title,
                    h('Icon', {
                        props: {
                            type: 'md-help-circle'
                        }
                    })
                ]
            )
        },
    },
    {
        title: 'Age',
        key: 'age'
    },
    {
        title: 'Address',
        key: 'address'
    }
],

2.单元格渲染

在这里插入图片描述

columns1: [
   {
       title: 'Name',
       key: 'name',
       renderHeader: (h, column) => {
           return h('Tooltip', {
                   props: {
                       content: '*******************',
                       placement: 'top',
                       transfer: true
                   }
               },
               [
                   column.column.title,
                   h('Icon', {
                       props: {
                           type: 'md-help-circle'
                       }
                   })
               ]
           )
       },
   },
   {
       title: 'Age',
       key: 'age',
       render: (h, params) => {
           return h('Tooltip', {
                   props: {
                       content: params.row.age,
                       placement: 'top',
                       transfer: true
                   }
               },
               [
                   params.row.age,
                   h('Icon', {
                       props: {
                           type: 'md-help-circle'
                       }
                   })
               ]
           )
   }
   },
   {
       title: 'Address',
       key: 'address'
   }
],

可以看看渲染函数
其中params.row表示当前这一行的数据
其中界面返回的格式是h(‘这里是组件A名称’，{这里是组件的一些性质，比如on、style，props等等，[这里是组件A的内嵌组件，具体可以参照Age这一列]，‘这里是该组件的文本内容’}

3.利用JSX来渲染单元格（以Button为例）

在这里插入图片描述

{
    title: 'Action',
    key: 'action',
    render: (h, params) => {
        let html = '-'
        html = <div>
            <i-button type="primary">编辑</i-button>
            <a class="vertical-none" onClick={() => console.log('点击事件')}> 关闭</a>
        </div>
        return (
            <div>
                {html}
            </div>
        )
    }
}

4.根据不同的条件显示不同的界面

在这里插入图片描述

{
    title: 'Action',
    key: 'action',
    render: (h, params) => {
        let html = '-'
        html = <div>
            {params.row.age>25?<i-button type="primary">编辑</i-button>:<i-button type="warning">编辑</i-button>}
            <a class="vertical-none" onClick={() => console.log('点击事件')}> 关闭</a>
        </div>
        return (
            <div>
                {html}
            </div>
        )
    }
}

5.jsx 点击事件

在这里插入图片描述

{
    title: 'Action',
    key: 'action',
    render: (h, params) => {
        let html = '-'
        html = <div>
            {params.row.age>25?<i-button onClick={() =>console.log('点击事件')} style="margin-right:10px" type="primary">编辑</i-button>:<i-button style="margin-right:10px" type="warning">编辑</i-button>}
            <dropdown
                transfer={true}
                onOn-click={name => {
                    this.selectOperate(name, row)
                }}
            >
                <a class="vertical-none">
                    更多
                    <icon type="ios-arrow-down"></icon>
                </a>
                <dropdown-menu slot="list">
                    <dropdown-item name='deliver'>分配</dropdown-item>
                    <dropdown-item name='poiont'>指派</dropdown-item>
                </dropdown-menu>
            </dropdown>
        </div>
        return (
            <div>
                {html}
            </div>
        )
    }
}

6.h()形式的点击事件

在这里插入图片描述

{
    title: 'Action',
    key: 'action',
    render: (h, params) => {
        let dom1 = h(
            'Tag',
            {
                props: {type: 'border', color: 'primary', closable: true},
                on: {
                    'on-close': event => {
                        console.log('删除tag')
                    }
                },
                nativeOn: {
                    click: () => {
                        console.log("点击事件")
                    }
                }
            },
            params.row.age
        )
        let dom2 = h(
            'Dropdown', {
                on: {
                    "on-click": name => {
                        console.log('点击事件',name)
                    }
                },
                props: {transfer: true}
            }, [
                h('a', {
                    style:{
                        'margin-left':'10px'
                    }
                }, '下载'),
                h('DropdownMenu', {slot: "list"}, [
                    h(
                        "DropdownItem",
                        {props: {name: "dataDic"}},
                        "字典"
                    ),
                    h(
                        "DropdownItem",
                        {props: {name: "result"}},
                        "结果"
                    )
                ])
            ]
        )
        return h('div',[dom1,dom2])
    }
}