![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
elementUI
大奇哥哥
前端
展开
-
Vue高阶组件的应用场景一:el-table表格删除数据后,el-pagination自动向前翻页。
Vue高阶组件的应用场景一:el-table表格删除数据后,el-pagination自动向前翻页。原创 2022-02-25 17:20:38 · 1079 阅读 · 0 评论 -
el-table二次封装支持全选所有(带禁选,反选功能,全选后不用锁定去勾选)
<template> <div class="ws-base-table"> <el-table ref="WsBaseTable" v-bind="$attrs" v-on="$listeners" v-loading="loading" :element-loading-text="elementLoadingText" style="width: 100%" :style="s原创 2021-11-06 18:25:17 · 1054 阅读 · 0 评论 -
elementUI el-table 二次封装
elementUI el-table 二次封装基本能满足绝大部分的需求,利用el-table预留的插槽,在默认插槽和header插槽里面又分别放了插槽,十分灵活,表头和表格内容全部可以自定义,添加的属性不够可以自己加。另外,Table Attributes 和 Table Events 可以直接写在WsTable标签内,降低与业务的耦合。展示效果:代码示例:公共组件(定义为WsTable)<template> <el-table ref="WsTable"原创 2021-09-08 01:05:24 · 930 阅读 · 0 评论 -
基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件---优化升级版
项目中多次用到,网上也看了一些别人封装的,都不太满意,于是自己动手封装了一个,不足之处,还请大家多多指点,如果项目中能用到的话,还望点个赞,直接上代码。1.父组件<template> <div id="app"> <div>{{value1}}</div> <MultipleSelectCheckbox v-model="value1" key="1" placeholder="请选择" collapse-tags :optio.原创 2021-05-10 01:59:06 · 1685 阅读 · 8 评论 -
基于elementUI封装的带复选框el-checkbox的下拉多选el-select组件
组件:MultipleSelect.vue<template> <el-select v-model="selectValues" multiple placeholder="请选择" style="width: 50%" @change="changeSelect"> <el-option v-if="options.length" label="全选" value="全选"> <el-checkbox v-model="isSele..原创 2021-05-05 13:17:07 · 3140 阅读 · 2 评论 -
elementui el-table 动态多表头的背景颜色
<template> <div> <el-table :data="data" :header-cell-class-name="headerStyle"> <my-column v-for="(item,index) in col" :key="index" :col="item"></my-column> </el-table> </div></template>&l原创 2021-04-25 22:08:42 · 1771 阅读 · 0 评论