vue+element-ui
xuxb000
物极必反,冥冥之中自有定数
展开
-
vue+elementUI renderHeader函数实现表格头部hover出现图片
效果图:上代码:// 表头数据格式export const columnsList= [ { key: 'vcAcct', title: '产品代码', align: 'center', fixed: 'left', minWidth: '200', sortable: 'custom' }, { key: 'vcAcctName', title: '产品名称', align: 'center', fixed: 'left', minWidth: '120', sortable: '' },原创 2022-03-10 16:51:57 · 1186 阅读 · 0 评论 -
vue+element table动态取消勾选 和 刷新后默认勾选
技术: vue + element现在我们有这样一个需求,有当前政策和中指数据两个tab切换页签,在中指数据页面勾选到的数据要在当前政策这里能够展示,和删除,如果在当前政策这里删除了,那么中指数据那里取消勾选表格我用的是element table type=“selection”当前政策页面中指数据页面我遇到的问题就是 如果在当前政策这里删除了,那么中指数据那里怎么取消勾选?element 官网上这么说的,我先开始这用的clearSelection这个方法,想着删除了哪一条就把这一条出原创 2020-07-31 11:32:55 · 6743 阅读 · 5 评论 -
vue+element-ui之span-method属性实现相同数据合并单元格
vue+element-ui之span-method属性实现动态表格相同数据合并单元格今天碰到一个需求,我的表格是动态生成的,循环遍历出多个table表格, 如果里面某一列有相同的数据的,将单元格合并,起初找到了element里面的一个属性span-method感觉挺高兴的,仔细看了后才发现,他们用的时候表格都是死的,而我的表格是动态生成,处理数据的时候列表数据data传不进去,最后…// HTML<el-col v-for="(item, index) in result" :key原创 2020-11-17 19:18:48 · 4839 阅读 · 7 评论 -
vue+elementUI实现动态时间段的禁用disabledDate
动态时间段的禁用应用背景:不知道大家遇到过这样的需求没? 每一行的开始日期和结束日期时间**区间不能重叠**,但是可以出现中断。如:第一行开始时间-结束时间为:2020.1-2020.3,下一行数据不能在1月到3月,可以为2020.5-2020.7。**结束日期默认为至今**(本来可以使用 daterange 的,就是因为这句话,避免不了了)。点击添加按钮,可以在表格下方新增一行,操作同上。本来自己想着还挺简单的,可是随着行数添加的越多,发现越复杂,没办法 需求已经确定了改是改不了了,硬刚吧!实原创 2020-12-09 14:20:53 · 2834 阅读 · 2 评论 -
element-ui的el-table表格错位问题
el-table表格错位问题使用el-table在ie浏览器出现,谷歌偶尔出现的问题,如下图this.$nextkTick(() => { this.$refs.table.doLayout() // 解决表格错位})有时候表格里面的表格可能会撑不开,挤在一起,这个时候可以试试使用样式解决/deep/ .el-table{ // ie表格撑不开问题 .el-table__header{ width:100% !important; } .el-table__body{原创 2021-08-25 11:17:28 · 1096 阅读 · 0 评论 -
使用vue+element-ui的summary-method方法做列合计
使用vue+element-ui的summary-method方法做列合计// html代码<el-table :data="tableData1" style="width: 100%" border show-summary :summary-method="getSummaries"></el-table>// 合计列方法//合计getSummaries (param) { const { columns, data } = param原创 2021-09-08 09:07:26 · 1644 阅读 · 0 评论 -
elementUI - image-viewer - 图片放大查看组件
// import引入import ElImageViewer from 'element-ui/packages/image/src/image-viewer' // 在组件内声明export default { components: { ElImageViewer }}html:<el-image-viewer v-if="showViewer" :on-close="closeViewer" :url-list="imgURL"></el-imag.原创 2021-11-18 10:09:35 · 658 阅读 · 0 评论