"表格"组件:<table><tr><td> —— 快应用组件库H-UI



<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<import name="thead" src="../Common/ui/h-ui/data/c_thead"></import>
<import name="tbody" src="../Common/ui/h-ui/data/c_tbody"></import>
<import name="tr" src="../Common/ui/h-ui/data/c_tr"></import>
<import name="th" src="../Common/ui/h-ui/data/c_th"></import>
<import name="td" src="../Common/ui/h-ui/data/c_td"></import>
<template>
    <div class="container">
        <table>
            <thead>
                <tr>
                    <th width="1" text="#"></th>
                    <th text="省份"></th>
                    <th text="城市"></th>
                    <th text="区县"></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th width="1" text="1"></th>
                    <td text="广东省"></td>
                    <td text="深圳市"></td>
                    <td text="福田区"></td>
                </tr>
                <tr>
                    <th width="1" text="2"></th>
                    <td text="浙江省"></td>
                    <td text="杭州市"></td>
                    <td text="上城区"></td>
                </tr>
                <tr>
                    <th width="1" text="3"></th>
                    <td text="四川省"></td>
                    <td text="成都市"></td>
                    <td text="武侯区"></td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style








{
    "message":{
        "province": "province",
        "city": "city",
        "district": "district",
        "address": "address",
        "contact": "contact"
    }
}



{
    "message": {
        "province": "省份",
        "city": "城市",
        "district": "区县",
        "address": "地址",
        "contact": "联系人"
    }
}



<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<template>
    <div class="container">
        <table id="table1" data="{{data}}"></table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: {
                thead: [
                    {
                        key: 'province',
                         4
                    },
                    {
                        key: 'city',
                         4
                    },
                    {
                        key: 'district',
                         4
                    }
                ],
                tbody: [
                    {
                        province: '广东省',
                        city: '深圳市',
                        district: '福田区',
                        address: '体育馆一号馆',
                        contact: '张三'
                    },
                    {
                        province: '浙江省',
                        city: '杭州市',
                        district: '上城区',
                        address: '小太阳幼儿园',
                        contact: '李四'
                    },
                    {
                        province: '四川省',
                        city: '成都市',
                        district: '武侯区',
                        address: '商业步行街22号商铺',
                        contact: '王五'
                    }
                ]
            }
        }
    }
</script>



可对数据做编辑和删除操作：



监控用户点击编辑按钮：



如果用户点击删除按钮，会弹出模态确认框：



如果用户确认确认，则会被监控捕捉到，应用可进一步请求后端服务进行数据删除：



<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<template>
    <div class="container">
        <table id="table2" data="{{data}}" show-edit="true" show-delete="true"></table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: {
                thead: [
                    {
                        key: 'province',
                         4
                    },
                    {
                        key: 'city',
                         4
                    },
                    {
                        key: 'district',
                         4
                    }
                ],
                tbody: [
                    {
                        province: '广东省',
                        city: '深圳市',
                        district: '福田区',
                        address: '体育馆一号馆',
                        contact: '张三'
                    },
                    {
                        province: '浙江省',
                        city: '杭州市',
                        district: '上城区',
                        address: '小太阳幼儿园',
                        contact: '李四'
                    },
                    {
                        province: '四川省',
                        city: '成都市',
                        district: '武侯区',
                        address: '商业步行街22号商铺',
                        contact: '王五'
                    }
                ]
            }
        },
        onInit() {
            this.$on('table2_dispatchEditEvt',this.dispatchEditEvt)
            this.$on('table2_dispatchDeleteEvt',this.dispatchDeleteEvt)
        },
        dispatchEditEvt(evt) {
            // 弹窗显示详细说明
            prompt.showToast({
                message: '用户点击了第' + (evt.detail.value + 1) + '条数据的编辑按钮！',
                duration: 1,
                gravity: 'top'
            })
        },
        dispatchDeleteEvt(evt) {
            // 弹窗显示详细说明
            prompt.showToast({
                message: '用户点击了第' + (evt.detail.value + 1) + '条数据的删除按钮！',
                duration: 1,
                gravity: 'top'
            })
        }
    }
</script>



<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<template>
    <div class="container">
        <table id="table3" data="{{data}}"  current="1" accordion="true" sm="true"></table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: {
                thead: [
                    {
                        key: 'province',
                         4
                    },
                    {
                        key: 'city',
                         4
                    },
                    {
                        key: 'district',
                         4
                    }
                ],
                tbody: [
                    {
                        province: '广东省',
                        city: '深圳市',
                        district: '福田区',
                        address: '体育馆一号馆',
                        contact: '张三'
                    },
                    {
                        province: '浙江省',
                        city: '杭州市',
                        district: '上城区',
                        address: '小太阳幼儿园',
                        contact: '李四'
                    },
                    {
                        province: '四川省',
                        city: '成都市',
                        district: '武侯区',
                        address: '商业步行街22号商铺',
                        contact: '王五'
                    }
                ]
            }
        }
    }
</script>





<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<template>
    <div class="container">
        <table id="table4" data="{{data}}" dark="true"></table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: {
                thead: [
                    {
                        key: 'province',
                         4
                    },
                    {
                        key: 'city',
                         4
                    },
                    {
                        key: 'district',
                         4
                    }
                ],
                tbody: [
                    {
                        province: '广东省',
                        city: '深圳市',
                        district: '福田区',
                        address: '体育馆一号馆',
                        contact: '张三'
                    },
                    {
                        province: '浙江省',
                        city: '杭州市',
                        district: '上城区',
                        address: '小太阳幼儿园',
                        contact: '李四'
                    },
                    {
                        province: '四川省',
                        city: '成都市',
                        district: '武侯区',
                        address: '商业步行街22号商铺',
                        contact: '王五'
                    }
                ]
            }
        }
    }
</script>



<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<template>
    <div class="container">
        <table id="table5" data="{{data}}" thead="dark"></table>
        <table id="table6" data="{{data}}" thead="light"></table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: {
                thead: [
                    {
                        key: 'province',
                         4
                    },
                    {
                        key: 'city',
                         4
                    },
                    {
                        key: 'district',
                         4
                    }
                ],
                tbody: [
                    {
                        province: '广东省',
                        city: '深圳市',
                        district: '福田区',
                        address: '体育馆一号馆',
                        contact: '张三'
                    },
                    {
                        province: '浙江省',
                        city: '杭州市',
                        district: '上城区',
                        address: '小太阳幼儿园',
                        contact: '李四'
                    },
                    {
                        province: '四川省',
                        city: '成都市',
                        district: '武侯区',
                        address: '商业步行街22号商铺',
                        contact: '王五'
                    }
                ]
            }
        }
    }
</script>



<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<template>
    <div class="container">
        <table id="table7" data="{{data}}" striped="true"></table>
        <table id="table8" data="{{data}}" striped="true" dark="true"></table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: {
                thead: [
                    {
                        key: 'province',
                         4
                    },
                    {
                        key: 'city',
                         4
                    },
                    {
                        key: 'district',
                         4
                    }
                ],
                tbody: [
                    {
                        province: '广东省',
                        city: '深圳市',
                        district: '福田区',
                        address: '体育馆一号馆',
                        contact: '张三'
                    },
                    {
                        province: '浙江省',
                        city: '杭州市',
                        district: '上城区',
                        address: '小太阳幼儿园',
                        contact: '李四'
                    },
                    {
                        province: '四川省',
                        city: '成都市',
                        district: '武侯区',
                        address: '商业步行街22号商铺',
                        contact: '王五'
                    }
                ]
            }
        }
    }
</script>



展开效果：



<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<template>
    <div class="container">
        <table id="table9" data="{{data}}" bordered="true"></table>
        <table id="table10" data="{{data}}" bordered="true" dark="true"></table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: {
                thead: [
                    {
                        key: 'province',
                         4
                    },
                    {
                        key: 'city',
                         4
                    },
                    {
                        key: 'district',
                         4
                    }
                ],
                tbody: [
                    {
                        province: '广东省',
                        city: '深圳市',
                        district: '福田区',
                        address: '体育馆一号馆',
                        contact: '张三'
                    },
                    {
                        province: '浙江省',
                        city: '杭州市',
                        district: '上城区',
                        address: '小太阳幼儿园',
                        contact: '李四'
                    },
                    {
                        province: '四川省',
                        city: '成都市',
                        district: '武侯区',
                        address: '商业步行街22号商铺',
                        contact: '王五'
                    }
                ]
            }
        }
    }
</script>



展开效果：



<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<template>
    <div class="container">
        <table id="table11" data="{{data}}" borderless="true"></table>
        <table id="table12" data="{{data}}" borderless="true" dark="true"></table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: {
                thead: [
                    {
                        key: 'province',
                         4
                    },
                    {
                        key: 'city',
                         4
                    },
                    {
                        key: 'district',
                         4
                    }
                ],
                tbody: [
                    {
                        province: '广东省',
                        city: '深圳市',
                        district: '福田区',
                        address: '体育馆一号馆',
                        contact: '张三'
                    },
                    {
                        province: '浙江省',
                        city: '杭州市',
                        district: '上城区',
                        address: '小太阳幼儿园',
                        contact: '李四'
                    },
                    {
                        province: '四川省',
                        city: '成都市',
                        district: '武侯区',
                        address: '商业步行街22号商铺',
                        contact: '王五'
                    }
                ]
            }
        }
    }
</script>





<import name="table" src="../Common/ui/h-ui/data/c_table"></import>
<template>
    <div class="container">
        <table id="table13" data="{{data2}}"></table>
        <table id="table14" data="{{data2}}" dark="true"></table>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data2: {
                thead: [
                    {
                        key: 'province',
                         4
                    },
                    {
                        key: 'city',
                         4
                    },
                    {
                        key: 'district',
                         4
                    }
                ],
                tbody: [
                    {
                        province: '广东省',
                        city: '深圳市',
                        district: '福田区',
                        address: '体育馆一号馆',
                        contact: '张三'
                    },
                    {
                        province: '浙江省',
                        city: '杭州市',
                        district: '上城区',
                        address: '小太阳幼儿园',
                        contact: '李四'
                    },
                    {
                        province: '四川省',
                        city: '成都市',
                        district: '武侯区',
                        address: '商业步行街22号商铺',
                        contact: '王五'
                    },
                    {
                        province: '河南省',
                        city: '郑州市',
                        district: '惠济区',
                        address: '惠民影院三楼305',
                        contact: '赵六'
                    },
                    {
                        province: '山东省',
                        city: '济南市',
                        district: '天桥区',
                        address: '中心小学一年级教务处',
                        contact: '钱七'
                    },
                    {
                        province: '江苏省',
                        city: '苏州市',
                        district: '姑苏区',
                        address: '姑苏酒家',
                        contact: '黄八'
                    },
                    {
                        province: '湖北省',
                        city: '武汉市',
                        district: '江汉区',
                        address: '万达广场303',
                        contact: '周九'
                    },
                    {
                        province: '湖南省',
                        city: '岳阳市',
                        district: '岳阳楼区',
                        address: '岳阳楼管理处',
                        contact: '吴十'
                    },
                    {
                        province: '河北省',
                        city: '石家庄市',
                        district: '桥西区',
                        address: '桥西街道办',
                        contact: '郑十一'
                    }
                ],
                type: ['default', 'primary', '', 'success', '', 'warning', '', 'danger', 'info']
            }
        }
    }
</script>

扫码体验