效果图:

1、云服务端的数据为:

- {
- "number": "1",
- "shopping_num": "ctx_123",
- "name": "经络仪",
- "classification_id": "理疗仪器",
- "hot_sale": "热卖品",
- "commodity_unit": "商品单位",
- "counter_price": "",
- "price": "500",
- "introduction": "我是00"
- }
2、视图代码
- const db = uniCloud.database();
- const dbCmd = db.command;
- const dbCollectionName = 'wy-shopping'; //你的数据库表名
在onready里面加上请求加载数据的代码:
this.$refs.udb.loadData() //重要:这一句加载数据,udb指组件的ref值
class="uni-container"> -
- <unicloud-db ref="udb" collection="wy-shopping"
- field="number,shopping_num,name,classification_id,hot_sale,commodity_unit,counter_price,price,introduction"
- :where="where" page-data="replace" :orderby="orderby" :getcount="true" :page-size="options.pageSize"
- :page-current="options.pageCurrent" v-slot:default="{data,pagination,loading,error,options}"
- :options="options" loadtime="manual" @load="onqueryload">
- <uni-table ref="table" :loading="loading" :emptyText="error.message || $t('common.empty')" border stripe
- type="selection" @selection-change="selectionChange">
-
- <uni-tr>
- <uni-th align="center" filter-type="search" @filter-change="filterChange($event, 'number')"
- sortable @sort-change="sortChange($event, 'number')">编号uni-th>
- <uni-th align="center">商品编号uni-th>
- <uni-th align="center">商品名称uni-th>
- <uni-th align="center">分类iduni-th>
- <uni-th align="center">热销标识uni-th>
- <uni-th align="center">商品单位uni-th>
- <uni-th align="center">专柜价格uni-th>
- <uni-th align="center">零售价格uni-th>
- <uni-th align="center">商品详细介绍uni-th>
- <uni-th align="center">操作uni-th>
- uni-tr>
-
- <uni-tr v-for="(item,index) in data" :key="index">
- <uni-td align="center">{{item.number}}uni-td>
- <uni-td align="center">{{item.shopping_num}}uni-td>
- <uni-td align="center">{{item.name}}uni-td>
- <uni-td align="center">{{item.classification_id}}uni-td>
- <uni-td align="center">{{item.hot_sale}}uni-td>
- <uni-td align="center">{{item.commodity_unit}} uni-td>
- <uni-td align="center">{{item.counter_price}} uni-td>
- <uni-td align="center">{{item.price}} uni-td>
- <uni-td align="center">{{item.introduction}} uni-td>
-
- <uni-td align="center">
- <view class="uni-group">
- <button @click="navigateTo('./edit?id='+item._id, false)" class="uni-button" size="mini"
- type="primary">{{$t('common.button.edit')}}button>
- <button @click="confirmDelete(item._id)" class="uni-button" size="mini"
- type="warn">{{$t('common.button.delete')}}button>
- view>
- uni-td>
- uni-tr>
- uni-table>
-
- <view class="uni-pagination-box">
- <uni-pagination show-iconn show-page-size :page-size="pagination.size" v-model="pagination.current"
- :total="pagination.count" @change="onPageChanged" @pageSizeChange="changeSize" />
- view>
- unicloud-db>
-
注意:field里的字段要跟后台的数据字段对应上
- db.collection('wy-shopping').limit(500).get().then(res => {
- console.log("查询wy-shopping表所有", res)
-
- }).catch(err => {
-
- })
- db.collection('数据库表名称').add('要增加的数据,一般是{}形式').then((res) => {
-
- }).catch((err) => {
-
- }).finally(() => {
- uni.hideLoading()
- })
- this.$refs.udb.remove(id, {
- success: (res) => {
- this.$refs.table.clearSelection()
- }
- })
- db.collection('wy-shopping').doc('表中的_id的值').update('想要修改成的数据,一般是{}形式').then((res) => {
-
- }).catch((err) => {
-
- }).finally(() => {
-
- })
1、报错:数据库验证失败:提交的字段["number","shopping_num","name","classification_id","hot_sale","commodity_unit","counter_price","price","introduction"]在云端数据表的schema文件中不存在
解决办法:在云数据库表里,(可参考其他表)在下面红框里补全 "number","shopping_num" 等等
