element-table类
表格为主
卖萌的小猪
这个作者很懒,什么都没留下…
展开
-
vue表格全局设置属性
全局统一设置table表格属性原创 2022-07-15 09:38:48 · 1797 阅读 · 2 评论 -
vue纯前端下载表格
一般我们做后台管理会遇到这样的需求:页面上的表格,需要纯前端技术来完成、不涉及接口对接、不涉及后端,就是你在页面上展示的表格是什么样,就要下载什么样的表格excel,方便人观察,废话不多说,上代码如图:点击下载表格按钮、这是web页面的效果 在最后一步可以看下载的表格效果1、安装依赖包 npm install --save xlsx file-saver npm install --save yxg-xlsx-style //调节样式需要用到的2、引入依...原创 2021-12-07 16:14:32 · 1926 阅读 · 1 评论 -
element中el-switch用法 实际项目案例
需求:在表格中使用el-switch开关 要求文字在开关内显示 、 官网给的不符合我们的要求 点击开关时给用户提示 是否启用禁用该状态 ?废话不多说 上代码 效果图你扒拉扒拉 见最后 看看是不是你需要的1、HTML部分 <el-table-column label="状态" align="center" min-width="100"> <template slot-scope="scope"> <el-switch原创 2021-01-13 16:55:47 · 8927 阅读 · 2 评论 -
element table只计算最后一列数据总和
需求:element table只计算表格中最后一列的总和官网中的示例是所有数字列都进行计算总和的。所以需要自己处理。1、HTML<el-table border show-summary :summary-method="getSummaries" :formatter="formatter" :default-sort = "{prop: 'projectName', order: 'descend原创 2020-12-12 09:35:47 · 2281 阅读 · 4 评论 -
解决element-ui的table表格的表头与内容列对齐问题
直接上代码,就是在style上加一个样式,如果多个页面涉及的表格过多,可定义一个全局样式<style> /* 解决element-ui的table表格控件表头与内容列不对齐问题 */ .el-table th.gutter{ display: table-cell!important; }</style>这样就大功告成啦!!!!!!对齐啦!!!...原创 2019-11-28 08:51:04 · 5253 阅读 · 0 评论 -
vue写的PC端表格,如何在移动端显示?
写了个pc端的页面,基本上是个表格吧!在移动端显示不正常,只能显示部分。不知该如何处理,最后是这样解决的ebody加个样式 min-width: 1200px;然后就真的可以显示了 ,这是在移动端显示的页面解决了一个小问题,真的很开心啊...原创 2019-11-27 15:07:04 · 3751 阅读 · 6 评论 -
vue使表头文字居中,表格某一列文字左对齐的方式
直接上代码<template> <div> <el-container> <h1 style="margin:20px 0">{{msg}}</h1> <el-main> <div> <el-table bor...原创 2019-11-27 14:43:59 · 13929 阅读 · 0 评论 -
表单+表格 提交按钮向后台提交数据
1,首先我的表格数据都是读取后台接口出来的数据,表单数据是前端在页面输入才有,但是表格数据默认的都是0,但是通过评委在页面打分,点击提交按钮,把数据提交到后台 ,后台进行处理。2,需要把姓名的表单数据,还有各个项目的指标的得分(在这里实际上是tableData的数据),总分,这些数据给提交到后台3,HTML代码<template> <div> <e...原创 2019-11-18 17:02:00 · 4496 阅读 · 0 评论 -
vue+element-ui 实现可编辑表格、动态渲染表头和表格数据、列向数据合计(每行末尾合计功能)
vue + element 实现可编辑表格、动态渲染表头表格数据、列向数据合计(每行末尾合计)1,首先得在项目中集成element-ui 安装,注册,具体参照 element-ui的集成2,我这里使用的vue-cli脚手架搭建的项目,可网上搜索相关知识3,我的需求,做一个比赛项目打分表,评委可以实现在线打分,表头和表格数据首先都是动态获取后台数据进行渲染,这里我先写成假数据以供大家参考...原创 2019-11-18 16:31:57 · 6860 阅读 · 0 评论 -
element可编辑表格 可追加、删除、编辑数据
实现 vue + element可编辑表格(二)现在需要实现在表格追加数据 且可编辑 废话不说 上代码吧 1、html部分 <!-- 新增可编辑表格 --> <el-table :data="tableData" border fit highlight-current-row style="width: 100%" > <el-table原创 2020-10-16 16:03:01 · 5940 阅读 · 2 评论 -
Vue + Element + Table 分页选择勾选 和取消勾选的问题
Vue + Element + Table 分页选择勾选 和取消勾选的问题问题描述: 需求是这样的===》表格前面每条数据都有复选框吧 然后表格有很多页 , 我从第一页选取N条数据 再去其他页选取M条数据 同时对选中的这M+N条数据进行一系列操作(如:批量删除、添加、修改等等吧,按自己需求来) 但是发现 在第一页选取数据之后 再去其他页再去选取数据 然后回到第一页 第一页选取的数据已经不是勾选状态了 这样就不符合我的需求了 就是切换页码 在回到之前 之前的选中状态已经清除了原创 2020-07-31 17:30:57 · 6429 阅读 · 7 评论