跟随Element学习Vue小技巧(25)——Table前言表哥第一次去老丈人家时，表哥陪老丈人打牌，斗地主表哥抓完牌一

❝
未来将要发生的事

一定有它的意义
❞

前言

表哥第一次去老丈人家时，表哥陪老丈人打牌，斗地主

表哥抓完牌一看自己手里牌不好，就要求加码，输一张牌一百元！老丈人高兴的直点头！结果老丈人一局下来赢了一千多

第二局，表哥一看自己手里都是大牌，就说，这局不加码了一块钱一张，果然，表哥赢了老丈人十几块钱！

就这样打了几局斗地主后，本来看表哥不顺眼的老丈人，你猜怎么着？更看不上表哥，非说表哥脑子有问题不能把闺女嫁给他

你有这样的表哥吗？
没有
那我送你一个怎么样？表格，表格，给你拗个对象

1 Table

边框border

一个年轻人把工厂给炸了，迅速被警察给逮捕了

你为什么要炸别人的工厂？
你不知道，我擦桌子用的抹布是他们工厂的，我出门打的伞是他们工厂的，我吃饭用的纸巾是他们工厂的，我回家洗脸，毛巾上浮现的商标又是他们工厂的，我觉得就算我是孙悟空，也逃不出他们的手掌心

「垄断，从来都是不被大众所接受的」
挣脱束缚，从去除边框开始！

代码片段

技巧解析

❝
el-table有border，cell有border，还有一条before红色的线，一条after绿色的线，所以，border到底怎么来的？
cell自带下边框，右边框
el-table去除了右下边框
本来一切完美，before和after又新增了两条线，覆盖右下border

所以呢？想要去除border，三步走
1.去除el-table的border
2.去除cell右下border
3.去除before和after这两条线

❞

防抖节流

下手那么快，手不会疼？？？

代码片段

// 反复切换
store.toggleAllSelection = debounce(10, store._toggleAllSelection)

// 反复悬停
this.activateTooltip = debounce(50, tooltip => tooltip.handleShowPopper());

// 多次进入
handleMouseEnter: debounce(30, function(index) {
  this.store.commit('setHoverRow', index);
})

// 多次离开
handleMouseLeave: debounce(30, function() {
  this.store.commit('setHoverRow', null);
})

// 实时滚动
this.bodyWrapper.addEventListener('scroll', this.syncPostion, { passive: true });
// 重新定位
syncPostion: throttle(20, function() {
  ...
})

技巧解析

❝
面对疯狂点击，该防抖了，最后一次重击，直接KO
滚过来滚过去，也挺累的，该节流了，隔一段时间，打你一次
防抖：重复点击，最后一次触发
节流：实时滚动，间隔一段时间触发

防抖和节流传送门
❞

2 watch

组件扩展

以前，手机只能发发短信，打打电话
后来，增加了MP3，MP4，成了智能机
再后来，APP，小程序的出现，让手机越来越强大！！
最后，我们再也离不开手机
谁抢我手机，我跟谁急，╭(╯^╰)╮

代码片段

// 组件扩展
export default Vue.extend({
  data() {
    ...
  },
  mixins: [expand, current, tree],
  methods: {
   ...
  }
});

// 原型扩展
import Watcher from './watcher';

// 属性扩展
Watcher.prototype.mutations = {
  ...
};

// 方法扩展
Watcher.prototype.commit = function(name, ...args) {
  const mutations = this.mutations;
  if (mutations[name]) {
    mutations[name].apply(this, [this.states].concat(args));
  } else {
    throw new Error(`Action not found: ${name}`);
  }
};

Watcher.prototype.updateTableScrollY = function() {
  Vue.nextTick(this.table.updateScrollY);
};

技巧解析

❝
组件本身已经够强大了，没想到还能扩展，怎么，想搞个超级组件，嘻嘻嘻
Vue.extend(), 传入想要扩展的功能，返回一个构造函数，记住是函数，不是组件
什么是构造函数呢？Vue就是
所以呢，构造函数有原型，可以扩展，也可以被实例化

原型与原型链传送门
 深入浅出Vue.extend 传送门
❞

3 工具箱

mapStates

/*
 @{file} helper.js
 @{function} 获取store对应state
 @{example}
  mapStates({
    selection: 'selection',
    columns: 'columns',
    tableData: 'data',
    fixedColumns: 'fixedColumns',
    rightFixedColumns: 'rightFixedColumns'
  })
  => 
  {
    selection: () =>this.store.states.selection,
    tableData: () =>this.store.states.data
    ...
  }
  
  computed里面使用解构赋值
  computed：{
    // selection() {
    //  return this.store.states.selection
    // }
    ...mapStates({
      selection: 'selection',
      columns: 'columns',
      tableData: 'data',
      fixedColumns: 'fixedColumns',
      rightFixedColumns: 'rightFixedColumns'
    })
  }
*/
export function mapStates(mapper) {
  const res = {};
  Object.keys(mapper).forEach(key => {
    const value = mapper[key];
    let fn;
    if (typeof value === 'string') {
      fn = function() {
        return this.store.states[value];
      };
    } else if (typeof value === 'function') {
      fn = function() {
        return value.call(this, this.store.states);
      };
    } else {
      console.error('invalid value type');
    }
    if (fn) {
      res[key] = fn;
    }
  });
  return res;
};

「我除了默默守护你」 「一无是处」

跟随Element学习Vue小技巧(25)——Table

未来将要发生的事

一定有它的意义

前言

1 Table

边框border

代码片段

技巧解析

防抖节流

代码片段

技巧解析

2 watch

组件扩展

代码片段

技巧解析

3 工具箱

mapStates

参考链接

往期回顾