iview表格

缺乏、安全感 2022-04-10 09:23 274阅读 0赞

这个设计的真好，向iview作者致敬

<template>
        <Table border :columns="columns1" :data="data1"></Table>
    </template>
    <script>
        export default {
            data () {
                return {
                    columns1: [
                        {
                            title: 'Name',
                            key: 'name'
                        },
                        {
                            title: 'Age',
                            key: 'age'
                        },
                        {
                            title: 'Address',
                            key: 'address'
                        }
                    ],
                    data1: [
                        {
                            name: 'John Brown',
                            age: 18,
                            address: 'New York No. 1 Lake Park',
                            date: '2016-10-03'
                        },
                        {
                            name: 'Jim Green',
                            age: 24,
                            address: 'London No. 1 Lake Park',
                            date: '2016-10-01'
                        },
                        {
                            name: 'Joe Black',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park',
                            date: '2016-10-02'
                        },
                        {
                            name: 'Jon Snow',
                            age: 26,
                            address: 'Ottawa No. 2 Lake Park',
                            date: '2016-10-04'
                        }
                    ]
                }
            }
        }
    </script>

通过render来渲染table单元格内容。以及使用slot-scope  
在 columns 的某列声明 slot 后，就可以在 Table 的 slot 中使用 slot-scope。  
slot-scope 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index

<template>
    <div>
        <Table border ref="selection" :columns="columns12" :data="data6">
            <template slot-scope="{ row }" slot="name">
                <strong>{
       { row.name }}</strong>
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">View</Button>
                <Button type="error" size="small" @click="remove(index)">Delete</Button>
            </template>
        </Table>
        <Button @click="selectAll(true)" >全选</Button>
        <Button @click="selectAll(false)" >全不选</Button>
    
    
        <Page :total=4 show-sizer   show-elevator></Page>
    
    </div>
    </template>
    <script>
        export default {
            data () {
                return {
                    columns12: [
                         {
                            type: 'selection',
                            width: 60,
                            align: 'center'
                        },
                        {
                            title: 'Name',
                            slot: 'name'
                        },
                        {
                            title: 'Age',
                            key: 'age',
                            sortable: true
                        },
                        {
                            title: 'Address',
                            key: 'address',
                            render:(h,params)=>{
                                return h("div",[
                                    h('Icon', {
                                        props:{
                                           type:"md-pin"
                                        }
                                       
                                    }),
                                    h('strong', params.row.address)
                                ]      
                                );
    
                            }
                        },
                        {
                            title: 'Action',
                            slot: 'action',
                            width: 150,
                            align: 'center'
                        }
                    ],
                    data6: [
                        {
                            name: 'John Brown',
                            age: 18,
                            address: 'New York No. 1 Lake Park'
                        },
                        {
                            name: 'Jim Green',
                            age: 24,
                            address: 'London No. 1 Lake Park'
                        },
                        {
                            name: 'Joe Black',
                            age: 30,
                            address: 'Sydney No. 1 Lake Park'
                        },
                        {
                            name: 'Jon Snow',
                            age: 26,
                            address: 'Ottawa No. 2 Lake Park'
                        }
                    ]
                }
            },
            methods: {
                show (index) {
                    this.$Modal.info({
                        title: 'User Info',
                        content: `Name：${this.data6[index].name}<br>Age：${this.data6[index].age}<br>Address：${this.data6[index].address}`
                    })
                },
                remove (index) {
                    this.data6.splice(index, 1);
                },
                selectAll(status){
                    this.$refs.selection.selectAll(status);
                }
    
            }
        }
    </script>

运行如下所示：还是很不错的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxvd29ybGRkbQ_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxvd29ybGRkbQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxvd29ybGRkbQ_size_16_color_FFFFFF_t_70]: /images/20220401/f48f1ab9649f4501806b849b1fc59cd8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hlbGxvd29ybGRkbQ_size_16_color_FFFFFF_t_70 1]: /images/20220401/6f876cfae0ab47dd9e92452be8c9e0ef.png