Vue二次封装el-Table表格

随着需求的增多,很多做b端的码友们都会发现明明一样的表格非要每个页面都需要引入一遍造成页面代码重复繁琐,有没有想过我们可以把他抽出来,这样就可以减少页面代码量呢,话不多说上代码。
(1)第一步在components下面创建table,并引入el-table
Vue二次封装el-Table表格_第1张图片

Vue二次封装el-Table表格_第2张图片

(2)一般情况下表格都需要序号的吧 ,这个看需求需求如果展示序号我们就让它展示反之隐藏,小编习惯默认隐藏掉

Vue二次封装el-Table表格_第3张图片
(3)然后去渲染我们的动态列,动态列接受数组json的形式,渲染动态列的时候我们需要思考项目中有些列是需要特殊展示的,比如操作列,时间列,我们可以定义一个type来判断这一列是否需要特殊展示需要的话这时候我们就需要用到作用域插槽,不需要就正常展示文字
Vue二次封装el-Table表格_第4张图片
Vue二次封装el-Table表格_第5张图片

 这时候我们成功了60%了,掌声鼓励!!!!


(4)有表格必然要分页可能也不需要分页具体看项目需求,这时候我们就需要传递参数来判断是否需要展示分页  currentPage表示当前页数 pageSize表示每页数量 total表示总数,
Vue二次封装el-Table表格_第6张图片 Vue二次封装el-Table表格_第7张图片

 这样我们的表格就可以应对一般类型业务啦

 

 项目中使用的话可以把组件挂载到全局,也可以单个页面引入小编是挂载到全局

 Vue二次封装el-Table表格_第8张图片

 Vue二次封装el-Table表格_第9张图片

 Vue二次封装el-Table表格_第10张图片

 这样就是封装表格的过程啦,可能还有封装缺陷,哪里不足的地方请大神多多指教

你可能感兴趣的:(大数据,vue.js,前端,前端框架)