ViewUI的Table组件使用摘记

一、ViewUI是基于Vue的UI框架。

CDN引用或本地引用：

<link rel="stylesheet" type="text/css" href="./JS/ViewUI.css">
<script type="text/javascript" src="./JS/vue.min.js"></script>
<script type="text/javascript" src="./JS/ViewUI.min.js"></script>

二、HTML标签是<i-Table>，VUE组件模板里是<Table>

基本属性及使用方法看文档就可以：https://www.iviewui.com/components/table

三、数据传递

<Table :columns="columns" :data="data">

 

data会按cloumns的规则自动生成表格数据。

data是一个对象数组（数组里存json）

columns是一个数组，里面罗列了“列”的各项属性。

主要属性：

title    列头显示文字，就是表头，第一行显示的文字。

key    对应列内容的字段名，值应和data里的某一项对应。

例子：

data1:

                data1: [{
                        name: '张三',
                        age: 18,
                    },
                    {
                        name: '李四',
                        age: 28,
                    }
                ]

columns1:

                columns1: [{
                        title: '姓名',
                        key: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    }
                ]

显示为：

 

四、使用slot-scope在单元格里放DOM元素

columns还有一个重要的属性：slot   设置后，可以放弃复杂的Render函数，直接在XX标签下放一个DOM元素。

columns1:

                columns1: [{
                        title: '姓名',
                        slot: 'name'
                    },
                    {
                        title: '年龄',
                        key: 'age'
                    }
                ]

HTML:

        <i-table :columns="columns1" :data="data1">
            <template slot-scope="{ row, index }" slot="name">
                <i-button>{{ row.name }}</i-button>
            </template>
        </i-table>

slot应该对应columns1里的slot。

slot-scope 的参数有 3 个：当前行数据 row，当前列数据 column，当前行序号 index

row就是data1[index]   =>  data[2]

row.name就是data1[index].name   =>   data[2].name

结果显示为：