需求：在大屏幕时、台式电脑上，显示table表格全部的列
在小屏幕、笔记本电脑上，显示滚动条，并固定最右边的一列
要能实时根据浏览器窗口的大小动态显示，这要怎么做呢？
首先，定义一个变量
screenWidth:window.innerWidth//接受用于获取当前浏览器窗口的视口宽度
window.innerWidth用于获取当前浏览器窗口的视口宽度（不包括浏览器工具栏、滚动条等占用的空间）。该属性返回的是一个数值（单位是像素），可以用于实现响应式布局或根据窗口尺寸调整页面元素大小等功能。
然后，在table的scroll属性加上
:scroll="screenWidth<=1366?{x:1800}:{}"//浏览器视口宽度小于1366就显示滚动条，否则不显示
这时候就能实现table底部滚动条根据屏幕大小显示与隐藏了。
但是想要实现动态显示我们要怎么做呢？
我们可以在created选项中设置一个监听器，动态的为screenWidth赋值
created(){
window.addEventListener('resize', () => {
this.screenWidth = window.innerWidth
})
}
别忘记在组件销毁阶段移除监听器哦！
beforeDestroy () {
window.removeEventListener('resize', () => {
this.screenWidth = window.innerWidth
})
},
嗯，我们实现了滚动条动态的根据屏幕大小显示与隐藏了。
最后一个需求，固定最后一列 我们设置一个侦听器
watch:{
screenWidth:function(){
//直接修改数组对象中的元素，视图不会发生更新哦，所以要使用Vue提供的特殊方法$set
this.$set( this.columns[this.columns.length-1],'fixed',this.screenWidth<=1366?'right':false)
}
},
这个侦听器检测screenWidth的值发生变化，当浏览器视口小于1366时，就给colums列数组的最后一项的属性对象上添加fixed：'right'. 大功告成。
如果表格的最后一项是通过push方法推入的：
this.columns.push({
title: '操作',
fixed: this.screenWidth <= 1366 ? 'right' : '',//那么就不需要设置侦听器了，直接在列数组这里设置就好了
dataIndex: 'action',
})
因为当使用以下方法操作数组时，Vue会自动进行视图更新：
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
这些方法都会修改原数组，而且 Vue 在修改数组时会触发 view 的更新，因此代码中不需要显式调用视图更新方法。
当时这些困扰了我好一会呢，现在回顾过来思路变清晰了
是不是很简单呢？快去试试吧
