vue.js实现查询具体数据

  • Lanceloft
  • 11 Minutes
  • February 23, 2017

技术栈:vue.js, vuex,
预览
表格内的查看详情是一个实用的功能, 主要有两种方法:
1.后端数据处理, 在点击详情时候前端传一个id, 然后后端接口根据数据id进行调用. 这儿就需要后端完成相关接口.
2.前端把数据进行循环, 在打开dialog时候传一个唯一参数匹配打开. 这个仅需要前端完成相关工作, 不需要进行调接口.
第一种方法只是传参就不作过多介绍, 主要介绍第二种方法, 因为项目使用了vuex, 因此分割为vuex的状态进行分类.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
list.vue  
<table>
<tr v-for="(entry, index) in capitalData"
:key="index">
<td>{{ entry.create_time | formatTime }}</td>
<td>{{ entry.order_no }}</td>
<td>{{ entry.capitalChannel }}</td>
<td>{{ entry.pay_user }}</td>
<td>{{ entry.product_name }}</td>
<td>{{ entry.amount }}</td>
<td>{{ entry.capiltalCashStatus }}</td>
<td>
<el-button type="text"
@click.native.stop="openCapitalDialog(entry.order_no)">查看
</el-button>
</td>
</tr>
</table>
<capital-dialog></capital-dialog>

// 省略其余代码
import { mapGetters, mapActions } from 'vuex';

export default{
methods: {
...mapActions([
'openCapitalDialog'
]),
},

computed: {
...mapGetters({
capitalData: 'getCapitalData',
}),
},

components:{ capitalDialog }
};

此处在vue里面, 把order_no进行传参, 值可以是其余唯一的参数即可, capitalData及里面dialog数据格式可参考 http://of166n10m.bkt.clouddn.com/blog/jsonfile.js
接下来就是完成vuex状态分发

1
2
3
4
action
openCapitalDialog: ({ commit }, orderNo) => {
commit(OPEN_CAPITAL_DIALOG, { orderNo });
},

使用了eslint要求使用驼峰法这里依然是传参

1
2
3
4
5
6
7
8
9
mutations
[OPEN_CAPITAL_DIALOG](stat, { orderNo }) {
state.openCapitalDialog = true;
state.capitalData.forEach((v, k) => {
if (v.order_no == orderNo) {
state.capitalFormData = state.capitalData[k];
}
});
},

这里就是重点了, capitalFormData是dialog里面数据的引用, 在这里就是进行传参, 然后循环, 判断相同的值, 然后capitalFormData就显示匹配的数据

1
2
3
4
5
6
7
8
getters
getCapitalData() {
return state.capitalData;
},

getCapitalFormData() {
return state.capitalFormData;
},

上面的就是getter, 除了完成getter还需要在完成state, 下面就是state定义可以看出dialog里面的数据和首页的数据是来源于同一份data, 只是进行了些处理

1
2
3
4
5
state
const state = {
capitalData: mock.capitalData,
capitalFormData: {}
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
dialog
<table>
<tr>
<td>订单编号</td>
<td>{{ capitalFormData.order_no }}</td>
</tr>
<tr>
<td>提交时间</td>
<td>{{ capitalFormData.create_time }}</td>
</tr>
<tr>
<td>交易平台</td>
<td>{{ capitalFormData.capitalPlatform }}</td>
</tr>
</table>

export default {
computed: mapGetters({
'capitalFormData': 'getCapitalFormData',
}),
};

好了就是这样子, 应该还是比较好懂的, 里面有一些关于vuex的搭建的状态就忽略了, 根据项目进行完成相对应的代码.