vue.js实现查询具体数据Lanceloft11 MinutesFebruary 23, 2017

技术栈:vue.js, vuex,

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

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状态分发

action
openCapitalDialog: ({ commit }, orderNo) => {
  commit(OPEN_CAPITAL_DIALOG, { orderNo });
},

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

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就显示匹配的数据

getters
getCapitalData() {
  return state.capitalData;
},

getCapitalFormData() {
  return state.capitalFormData;
},

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

state
const state = {
  capitalData: mock.capitalData,
  capitalFormData: {}
};

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的搭建的状态就忽略了, 根据项目进行完成相对应的代码.