"表格"组件:<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',
width: 4
},
{
key: 'city',
width: 4
},
{
key: 'district',
width: 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',
width: 4
},
{
key: 'city',
width: 4
},
{
key: 'district',
width: 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',
width: 4
},
{
key: 'city',
width: 4
},
{
key: 'district',
width: 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',
width: 4
},
{
key: 'city',
width: 4
},
{
key: 'district',
width: 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',
width: 4
},
{
key: 'city',
width: 4
},
{
key: 'district',
width: 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',
width: 4
},
{
key: 'city',
width: 4
},
{
key: 'district',
width: 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',
width: 4
},
{
key: 'city',
width: 4
},
{
key: 'district',
width: 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',
width: 4
},
{
key: 'city',
width: 4
},
{
key: 'district',
width: 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',
width: 4
},
{
key: 'city',
width: 4
},
{
key: 'district',
width: 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>
扫码体验

标签：province,city,表格,district,contact,UI,key,address,组件 来源： https://www.cnblogs.com/cloud-dev/p/biao-gezu-jianlttablegtlttrgtlttdgt--kuai-ying-yon.htm