Vuetable-2使用全纪录

vuetable-2介绍

vuetable2是一款基于vuejs开发的table组件，支持表格加载和翻页、翻页信息展示的组件
官方github | 官方API学习 | Tutorial
vuetable-2包括三个部分：
- vuetable
- vuetablePagination
  - vuetablePaginationDropdown
  - vuetablePaginationMixin
- vuetablePaginationInfo
  - vuetablePaginationInfoMixin

vuetable-2使用

我在项目中使用vuetable是基于vue-cli开发的，使用vue-router管理前端路由，所有path下的内容单独成一部分。
所以，希望：
1. 每个path内部的table组件是公共的
2. 对于path内部table的操作单独引用文件filterBar.vue
3. 对于表头的定义引用当前文件目录结构下的fieldDefs.js
4. 最后，将table和filterbar集合到当前path主文件中
例如：

<div class="network"><div class="filter-wrapper"><filter-bar @search="search"></filter-bar></div><div class="table-wrapper"><vuetable   :fields="fields":api-url='apiUrl':append-params="moreParams":filter="filter":http-method="method"></vuetable></div></div>

import FilterBar from './filterBar'
import Vuetable from '../components/vuetable'

vuetable

vuetable-pagination

vuetable-pagination-info

在使用过程中遇到的问题

原表格对于Bootstrap样式支持性不好，需要修改相关style样式
将对于表格限制条件挪出来，会涉及到很多两个子组件filterbar和vuetable之间的交流，通过同一父组件network很吃力
- 目前方法是：
  1. 在父组件network中定义一个状态值，如filterStatus，类型为Boolean
  2. 当filterbar组件的参数发生变化时，则对于filterStatus取反
  3. 将filterStatus通过this.$emit传递到父组件network
  4. 在父组件中设置computed属性值filter，其值为 return filterStatus
  5. 在父组件下的table组件中监听父组件传递下来的filter值，发生变化则触发vuetable的refresh事件
- 为什么这么做？
  - 父组件无法直接触发子组件vuetable的刷新事件
和后台的交互不太理想，后台使用的是java boot框架
- vuetable和后台交互采取axios，后台捕获不到相关数据，
  1. 需要修改请求头和序列化参数：

axios[this.httpMethod](this.apiUrl, qs.stringify(this.httpOptions), {
        headers: {          'Content-Type': 'application/x-www-form-urlencoded'
        }

关于ES6箭头函数导致的this指向问题

比较两段代码：

//代码1
methods: {getGoodsList () {axios.get("/goods").then((response) => {var res = response.data;if(res.status == "0") {console.log(this);this.goodsList = res.result.rows;}else {this.goodsList = [];}})}}//代码2
getGoodsList: () => {axios.get("/goods").then((response) => {var res = response.data;if(res.status == "0") {console.log(this);//这里this是undeinedthis.goodsList = res.result.rows;}else {this.goodsList = [];}})}

如果用es5语法写，goodsList能够正常获取值并更新视图，其指向的是vue实例，而es6箭头函数则会提示this是指向了methods（上下文），具体参考

Vuetable-2使用全纪录相关推荐

swagger 返回json字符串_Net Core微服务入门全纪录（完结）——Ocelot与Swagger
前言上一篇[.Net Core微服务入门全纪录(八)--Docker Compose与容器网络]完成了docker-compose.yml文件的编写,最后使用docker compose的一个up指 ...
.net core ocelot 获取路由的mothed_Net Core微服务入门全纪录(四)Ocelot网关(上)
上一篇[.Net Core微服务入门全纪录(三)--Consul-服务注册与发现(下)]已经使用Consul完成了服务的注册与发现,实际中光有服务注册与发现往往是不够的,我们需要一个统一的入口来连接客 ...
.Net Core微服务入门全纪录（完结）——Ocelot与Swagger
点击上方蓝字"小黑在哪里"关注我吧前言上一篇[.Net Core微服务入门全纪录(八)--Docker Compose与容器网络]完成了docker-compose.yml文件 ...
更换内存条、固态硬盘、双系统配置全纪录
联想IdeaPad 310S更换内存条.固态硬盘.双系统配置全纪录一.更换内存条二.更换固态三.重装windows10系统 1.准备工作 2.注意事项 3.制作启动盘四.加装ubuntu16. ...
RHEL 5.4 下安装和使用 ntop 全纪录（ntop：Linux下可通过Web访问的网络流量监控工具）...
RHEL 5.4 下安装和使用 ntop 全纪录 1. ntop介绍 Ntop是一种监控网络流量工具,用ntop显示网络的使用情况比其他一些网络管理软件更加直观.详细.Ntop甚至可以列出每个节点计算 ...
【AI作画】当梵高遇上东方明珠——梵高画风迁移全纪录
[AI作画]当梵高遇上东方明珠--梵高画风迁移全纪录视频: [AI作画]当梵高遇上东方明珠--梵高画风迁移全纪录梵高出生于1853年3月30日荷兰乡村津德尔特的一个新教牧师家庭,早年的他做过职员和 ...
究极丐版客制化机械键盘制作全纪录（下：程序下载）
究极丐版客制化机械键盘制作全纪录(下:程序下载) 前排提示:由于键盘制作时间距离写文章的时间比较久远所以不对分享文件的正确性保证!!!! 在比较久之前写了个上篇,当时比较有时间为了简单的记录自己做键盘 ...
究极丐版客制化机械键盘制作全纪录（上：硬件制作）
究极丐版客制化键盘制作全纪录注:2020.12.26 勘误
FRVT赛程全纪录：格灵深瞳全球排名前五
作者 | 张德兵,格灵深瞳首席科学家&算法部负责人来源 | 转载自知乎张德兵最近两个月,格灵深瞳首席科学家&算法部负责人张德兵与算法团队参加了全球人脸识别算法测试(FRVT.Fac ...
ICML 2019全纪录：论文解读、workshop讨论、核心知识都在这里了
郭一璞假装发自长滩量子位报道 | 公众号 QbitAI ICML 2019刚结束,新鲜出炉的会议笔记就来了. 这份笔记来自布朗大学博士David Abel,他整理了6月10日-6月14日五天 ...