极客观点
项目管理
HarmonyOS
在表单里使用v-model绑定了一个对象,之前使用的时候都没有出现过这种.
正常的应该全部属性打印出来,现在双向绑定全部失效了,下拉菜单全都选不上了;除非用单属性,而不是放到一个对象上.
图片描述
<template>
<div class="app-container">
<!--周期统计-->
<div class="count">
<div style="padding: 10px;">
<h2><span>周期统计</span><el-button @click="refUserCount()" size="small" type="primary">
<i class="iconfont icon-shuaxin" style="font-size:12px"></i>刷新</el-button></h2>
<ul v-if="userCount" class="Grid">
<li @click="$router.push({path:'/Operative/addday'})" style="cursor: pointer" class="Grid-cell Grid-cell.u-full">
<div>
<p><span>{{userCount.phoneRegTotal}}</span> / {{userCount.autoRegTotal}} / {{userCount.allTotal}}</p>
<h4><span>注册用户</span> / 分配账号 / 用户总数</h4>
</div>
</li>
<li @click="$router.push({path:'/Operative/addday'})" style="cursor: pointer" class="Grid-cell Grid-cell.u-full">
<div>
<p><span>{{userCount.todayPhoneRegTotal}}</span> / {{userCount.todayAutoRegTotal}} / {{userCount.todayTotal}}</p>
<h4><span>今日新增注册</span> / 今日新增分配 / 今日新增用户总数</h4>
</div>
</li>
<li @click="$router.push({path:'/Operative/addday'})" style="cursor: pointer" class="Grid-cell Grid-cell.u-full">
<div>
<p><span>{{userCount.currentOnlineTotal}}</span> / {{userCount.totalOnlineTop}} / {{userCount.historyOnlineTop}}</p>
<h4><span>当前在线人数</span> / 当天最高 / 历史最高</h4>
</div>
</li>
<li @click="$router.push({path:'/Operative/activeday'})" style="cursor: pointer" class="Grid-cell">
<div>
<p>{{userCount.todayActiveTotal}}</p>
<h4>今日活跃人数</h4>
</div>
</li>
</ul>
</div>
</div>
<!-- 筛选 -->
<div class="public_nav">
<jg-systematics-border title="筛选 / 搜索">
<div style="margin:10px 0">
<div class="warp">
<span>用户类型<i class="iconfont icon-maohao1"></i></span>
<el-select v-model="filter.useAccount" clearable placeholder="用户类型">
<el-option label="全部" value=""></el-option>
<el-option label="分配账号" value="0"></el-option>
<el-option label="注册账号" value="1"></el-option>
</el-select>
</div>
<div class="warp">
<span>渠道<i class="iconfont icon-maohao1"></i></span><jg-version @parentDate="cutoverVersion"></jg-version>
</div>
<div class="warp">
<span>版本<i class="iconfont icon-maohao1"></i></span><jg-channel @parentDate="cutoverChannel"></jg-channel>
</div>
<div class="warp">
<span>用户状态<i class="iconfont icon-maohao1"></i></span>
<el-select v-model="filter.status" clearable placeholder="处理状态">
<el-option label="全部" value=""></el-option>
<el-option label="正常" value="1"></el-option>
<el-option label="封号" value="0"></el-option>
</el-select>
</div>
<div class="warp">
<span>时间类型<i class="iconfont icon-maohao1"></i></span>
<el-select v-model="filter.dateType" clearable placeholder="时间类型">
<el-option label="全部" value=""></el-option>
<el-option label="登录时间" value="login"></el-option>
<el-option label="注册时间" value="register"></el-option>
</el-select>
<jg-date-picker @parentDate='getChildData' :filter='initDate'></jg-date-picker>
</div>
<div class="warp">
<el-button class="el-icon-search" @click="Inquire">筛选</el-button>
</div>
</div>
<div style="margin:10px 0">
<div class="warp">
<span>账号搜索<i class="iconfont icon-maohao1"></i></span>
<el-input placeholder="请输入内容" v-model="filter.keyword" style="width: 350px">
<el-select v-model="filter.userType" slot="prepend" placeholder="请选择" style="width: 160px">
<el-option label="账号名" value="name"></el-option>
<el-option label="账号名ID" value="id"></el-option>
<el-option label="账号名UUID" value="uuid"></el-option>
</el-select>
</el-input>
</div>
<div class="warp">
<el-button class="el-icon-search" @click="Inquire">搜索</el-button>
</div>
</div>
</jg-systematics-border>
</div>
<!-- 表格 -->
<div>
<p style="text-align: left;margin-left: 5px">用户列表:<span
style="font-size: 16px;color: red">{{pagination.total}}</span>条结果
</p>
<el-table
:data="tableData"
border
stripe
style="width: 100%">
<el-table-column prop="id" label="ID"></el-table-column>
<el-table-column prop="name" label="账号"></el-table-column>
<el-table-column prop="uuid" label="UUID"></el-table-column>
<el-table-column prop="reg_time" label="注册时间">
<template scope="scope">
{{scope.row.reg_time}}
</template>
</el-table-column>
<el-table-column label="注册版本">
<template scope="scope">
{{scope.row.channel}}_{{scope.row.edition}}_{{scope.row.app_version}}
</template>
</el-table-column>
<el-table-column prop="last_login_time" label="登录时间">
<template scope="scope">
{{scope.row.last_login_time}}
</template>
</el-table-column>
<el-table-column prop="app_channel" label="登录版本"></el-table-column>
<el-table-column prop="expiration" label="到期时间"></el-table-column>
<el-table-column prop="total_amount" label="充值金额"></el-table-column>
<el-table-column prop="status" label="用户状态">
<template scope="scope">
<el-tag :type="scope.row.status === 1 ? 'success' : 'primary'"
close-transition>{{scope.row.status === 1 ? '正常' : '封号'}}
</el-tag>
</template>
</el-table-column>
<el-table-column prop="date" label="详情" width="80" fixed="right">
<template scope="scope">
<el-button size="small" @click="detail(scope.row)">详情</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
@current-change="handleCurrentChange"
:current-page="pagination.currentPage"
layout="total, prev, pager, next, jumper"
:page-size="pagination.pageSize"
:total="pagination.total"
class="page">
</el-pagination>
</div>
</div>
</template>
<script>
import { monthTimes } from '@/utils/index'
import * as API from 'api/userlist'
export default {
data() {
return {
userCount: {},
initDate: {
start: '',
end: ''
},
filter: {
useAccount: '',
status: '',
channel: '',
edition: '',
dateType: '',
startTime: '',
endTime: '',
userType: 'name',
keyword: ''
},
tableData: [],
pagination: {
pageSize: 15,
currentPage: 1,
total: 0
}
}
},
methods: {
refUserCount() {
this._getUserListAccountTotal()
},
getChildData(val) {
this.initDate = val
},
cutoverVersion(val) {
this.filter.edition = val
},
cutoverChannel(val) {
this.filter.channel = val
},
Inquire() {
this._getUserListAccountList()
},
handleCurrentChange(val) {
this.pagination.currentPage = val
this._getUserListAccountList()
},
detail(row) {
console.log(row)
},
_getUserListAccountTotal() {
API.fetchUserListAccountTotal().then(res => {
if (res.data.status === 'success') {
this.userCount = Object.assign({}, res.data.data)
}
})
},
_getUserListAccountList() {
if (!this.filter.keyword) {
this.filter.userType = ''
}
API.fetchUserListAccountList(this.filter).then(res => {
if (res.data.status === 'success') {
this.tableData = res.data.data.data
this.pagination.total = res.data.data.total
this.filter.userType = 'name'
}
})
}
},
mounted() {
console.log(this.filter)
this.initDate = monthTimes()
this._getUserListAccountTotal()
this._getUserListAccountList()
}
}
</script>
首先确保这么几个问题：
1、打印显示的结果是执行
mounted里面那个打印嘛？2、有没有在
mounted之前的生命周期钩子函数中对filter对象数据进行操作？正常来讲(我刚刚也亲自尝试了)，会把
filter里面所有对象都打印出来，不会因为值是空字符串而不打印