UI组件

# Table

# 使用演示

# 1. 固定表头

# 预览:

# 代码:

显示代码 
<template>
    <div class="demo">
        <g-table :data-source="dataSource"
                 :scroll-height="400"
        >
            <g-table-column title="姓名" field="name" :width="230">
                <template v-slot:default="props">
                    <a href="#">{{props.value}}</a>
                </template>
            </g-table-column>
            <g-table-column title="年龄" field="age" :width="90">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
            <g-table-column title="爱好" field="hobby" :width="200">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
        </g-table>
    </div>
</template>

<script>
    import {Table as GTable} from 'fanlelee-t-1-1'
    import {TableColumn as GTableColumn} from 'fanlelee-t-1-1'
    import 'fanlelee-t-1-1/dist/gulu.css'
    export default {
        name: "demo",
        components: {GTable, GTableColumn},
        data() {
            return {
                dataSource: [
                    {id: 1, name: '小刘', age: 39, hobby: '打麻将', description: '备注'},
                    {id: 2, name: '小王子', age: 20, hobby: '涉猎', description: '详情'},
                    {id: 3, name: '豌豆公主', age: 17, hobby: '化妆'},
                    {id: 4, name: '哪吒', age: 12, hobby: '游泳'},
                    {id: 5, name: '玉皇大帝', age: 120, hobby: '钓鱼'},
                    {id: 6, name: '王母娘娘', age: 99, hobby: '养花'},
                    {id: 7, name: '小刘', age: 39, hobby: '打麻将'},
                    {id: 8, name: '小王子', age: 20, hobby: '涉猎'},
                    {id: 9, name: '豌豆公主', age: 17, hobby: '化妆'},
                    {id: 10, name: '哪吒', age: 12, hobby: '游泳'},
                    {id: 11, name: '玉皇大帝', age: 120, hobby: '钓鱼'},
                    {id: 12, name: '王母娘娘', age: 99, hobby: '养花'},
                    {id: 13, name: '豌豆公主', age: 17, hobby: '化妆'},
                    {id: 14, name: '哪吒', age: 12, hobby: '游泳'},
                    {id: 15, name: '玉皇大帝', age: 120, hobby: '钓鱼'},
                    {id: 16, name: '王母娘娘', age: 99, hobby: '养花'},
                    {id: 17, name: '小刘', age: 39, hobby: '打麻将'},
                    {id: 18, name: '小王子', age: 20, hobby: '涉猎'},
                    {id: 19, name: '豌豆公主', age: 17, hobby: '化妆'},
                ],
            }
        },
    }
</script>

<style scoped>
    /deep/ * {margin: 0;padding: 0;box-sizing: border-box;}
</style>

# 2. 可选项

# 预览:

# 代码:

显示代码 
<template>
    <div class="demo">
        <g-table :data-source="dataSource"
                 :selected.sync="selected"
                 :check-box="true"
        >
            <g-table-column title="姓名" field="name" :width="230">
                <template v-slot:default="props">
                    <a href="#">{{props.value}}</a>
                </template>
            </g-table-column>
            <g-table-column title="年龄" field="age" :width="90">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
            <g-table-column title="爱好" field="hobby" :width="200">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
        </g-table>
    </div>
</template>

<script>
    import {Table as GTable} from 'fanlelee-t-1-1'
    import {TableColumn as GTableColumn} from 'fanlelee-t-1-1'
    import 'fanlelee-t-1-1/dist/gulu.css'
    export default {
        name: "demo",
        components: {GTable, GTableColumn},
        data() {
            return {
                dataSource: [
                    {id: 1, name: '小刘', age: 39, hobby: '打麻将', description: '备注'},
                    {id: 2, name: '小王子', age: 20, hobby: '涉猎', description: '详情'},
                    {id: 3, name: '豌豆公主', age: 17, hobby: '化妆'},
                    {id: 4, name: '哪吒', age: 12, hobby: '游泳'},
                    {id: 5, name: '玉皇大帝', age: 120, hobby: '钓鱼'},
                    {id: 6, name: '王母娘娘', age: 99, hobby: '养花'},
                    {id: 7, name: '小刘', age: 39, hobby: '打麻将'},
                ],
                selected: [],
            }
        },
    }
</script>

<style scoped>
    /deep/ * {margin: 0;padding: 0;box-sizing: border-box;}
</style>

# 3. 排序

# 预览:

# 代码:

显示代码 
<template>
    <div class="demo">
        <g-table :data-source="dataSource"
                 :sort-rules.sync="sortRules"
                 @update:sortRules="ajaxNewSort"
                 :loading="loading"
        >
            <g-table-column title="姓名" field="name" :width="230">
                <template v-slot:default="props">
                    <a href="#">{{props.value}}</a>
                </template>
            </g-table-column>
            <g-table-column title="年龄" field="age" :width="90">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
            <g-table-column title="爱好" field="hobby" :width="200">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
        </g-table>
    </div>
</template>

<script>
    import {Table as GTable} from 'fanlelee-t-1-1'
    import {TableColumn as GTableColumn} from 'fanlelee-t-1-1'
    import 'fanlelee-t-1-1/dist/gulu.css'
    export default {
        name: "demo",
        components: {GTable, GTableColumn},
        data() {
            return {
                dataSource: [
                    {id: 1, name: '小刘', age: 39, hobby: '打麻将', description: '备注'},
                    {id: 2, name: '小王子', age: 20, hobby: '涉猎', description: '详情'},
                    {id: 3, name: '豌豆公主', age: 17, hobby: '化妆'},
                    {id: 4, name: '哪吒', age: 12, hobby: '游泳'},
                    {id: 5, name: '玉皇大帝', age: 120, hobby: '钓鱼'},
                    {id: 6, name: '王母娘娘', age: 99, hobby: '养花'},
                    {id: 7, name: '小刘', age: 39, hobby: '打麻将'},
                    {id: 8, name: '小王子', age: 20, hobby: '涉猎'},
                    {id: 9, name: '豌豆公主', age: 17, hobby: '化妆'},
                    {id: 10, name: '哪吒', age: 12, hobby: '游泳'},
                ],
                sortRules: {
                    age: 'asc',
                    hobby: 'desc'
                },
                loading: false,
            }
        },
        mounted() {
        },
        methods: {
            ajaxNewSort() {
                this.loading = true
                setTimeout(() => {
                    // ajax(url,sortRules)
                    //     .then((response)=>{
                    let field
                    Object.keys(this.sortRules).map((node) => {
                        if (this.sortRules[node] !== '') {
                            field = node
                        }
                    })
                    this.dataSource = this.dataSource.sort((a, b) => {
                        if (this.sortRules[field] === 'asc') {
                            return a[field] - b[field]
                        }
                        if (this.sortRules[field] === 'desc') {
                            return b[field] - a[field]
                        }
                    })
                    this.loading = false
                    //     })
                }, 1000)
            },
        }
    }
</script>

<style scoped>
    /deep/ * {margin: 0;padding: 0;box-sizing: border-box;}
</style>

# 4. 扩展数据

# 预览:

# 代码:

显示代码 
<template>
    <div class="demo">
        <g-table :data-source="dataSource"
                 :expand-description="expandDescription"
        >
            <g-table-column title="姓名" field="name" :width="230">
                <template v-slot:default="props">
                    <a href="#">{{props.value}}</a>
                </template>
            </g-table-column>
            <g-table-column title="年龄" field="age" :width="90">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
            <g-table-column title="爱好" field="hobby" :width="200">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
        </g-table>
    </div>
</template>

<script>
    import {Table as GTable} from 'fanlelee-t-1-1'
    import {TableColumn as GTableColumn} from 'fanlelee-t-1-1'
    import 'fanlelee-t-1-1/dist/gulu.css'
    export default {
        name: "demo",
        components: {GTable, GTableColumn},
        data() {
            return {
                dataSource: [
                    {id: 1, name: '小刘', age: 39, hobby: '打麻将', description: '备注'},
                    {id: 2, name: '小王子', age: 20, hobby: '涉猎', description: '详情'},
                    {id: 3, name: '豌豆公主', age: 17, hobby: '化妆'},
                    {id: 4, name: '哪吒', age: 12, hobby: '游泳'},
                    {id: 5, name: '玉皇大帝', age: 120, hobby: '钓鱼'},
                    {id: 6, name: '王母娘娘', age: 99, hobby: '养花'},
                ],
                expandDescription: 'description',
            }
        },
    }   
</script>

<style scoped>
    /deep/ * {margin: 0;padding: 0;box-sizing: border-box;}
</style>

# 5. 可添加动态操作

# 预览:

# 代码:

显示代码 
<template>
    <div class="demo">
        <g-table :data-source="dataSource">
            <template v-slot:handle="props" >
                <button @click="edit(props.item)">编辑</button>
                <button @click="cut(props.item)">删除</button>
            </template>
            <g-table-column title="姓名" field="name" :width="230">
                <template v-slot:default="props">
                    <a href="#">{{props.value}}</a>
                </template>
            </g-table-column>
            <g-table-column title="年龄" field="age" :width="90">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
            <g-table-column title="爱好" field="hobby" :width="200">
                <template v-slot:default="props">
                    {{props.value}}
                </template>
            </g-table-column>
        </g-table>
    </div>
</template>

<script>
    import {Table as GTable} from 'fanlelee-t-1-1'
    import {TableColumn as GTableColumn} from 'fanlelee-t-1-1'
    import 'fanlelee-t-1-1/dist/gulu.css'
    export default {
        name: "demo",
        components: {GTable, GTableColumn},
        data() {
            return {
                dataSource: [
                    {id: 1, name: '小刘', age: 39, hobby: '打麻将', description: '备注'},
                    {id: 2, name: '小王子', age: 20, hobby: '涉猎', description: '详情'},
                    {id: 3, name: '豌豆公主', age: 17, hobby: '化妆'},
                    {id: 4, name: '哪吒', age: 12, hobby: '游泳'},
                    {id: 5, name: '玉皇大帝', age: 120, hobby: '钓鱼'},
                    {id: 6, name: '王母娘娘', age: 99, hobby: '养花'},
                ],
                sortRules: {
                    age: 'asc',
                    hobby: 'desc'
                },
                selected: [],
                loading: false,
                scrollHeight: 400,
                expandDescription: 'description',
            }
        },
        methods: {
            edit(item) {
                alert(`${item.name}，编辑`)
            },
            cut(item) {
                alert(`${item.name}，删除`)
            },
        }
    }
</script>

<style scoped>
    /deep/ * {margin: 0;padding: 0;box-sizing: border-box;}
</style>

# API

# Table

参数 说明 类型 默认值
dataSource 表格数据，不能为空，其中dataSource数组里面的每个对象必须含有唯一id。 Array 无
expandDescription 指定扩展内容的字段名，对应dataSource里每条数据扩展内容的字段名。 String 无
scrollHeight 表内容滚动时给定内容展示的高度。（px） Number 无
checkBox 是否需要添加选择项 Boolean false
selected 自定义选择项，当前所选中的数据。可监听选中项的变化，:selected.sync="selected"。 Array 空数组
sortRules 指定列排序，对应dataSource里的指定字段。可以是'asc'、'desc'、''。 Object 空对象
loading 排序时，是否出现加载样式。（当数据获取到后一定要将loading设为false） Boolean false
compact 表格排列是否紧凑 Boolean false
striped 表格风格是否有条纹。 Boolean true
cell 表格内容是否用格子划分开。 Boolean false

# TableColumn

参数 说明 类型 默认值
title 指定列名。 String 无
field 该列名对应的字段名，对应Table的dataSource String 无
width 指定该列宽度。（px） Number 无

← Uploader 上传图片 →