0
0

el-table表格还可以这么玩

六年代码两茫茫，不思量，自难忘
6年资深前端主管一枚，只分享技术干货，教你如何优雅地写代码

关注博主不迷路~

文章目录

前言

我们都知道表格是横向渲染的，一行一行去展示。不过博主这里有个需求是纵向渲染，一列一列去展示…嗯…不难…做出来了，下面是全部代码，分享出来或许能帮到你们。

案例介绍

  1. 本案例点击添加可添加一列（为后一天时间），新添加列可取消，有数据了按钮会变成保存，当添加到10条数据，自动往后推一天，永远显示10条数据

案例截图

点击添加列
可取消和保存

template模板

  1. <template><div class="app-container"><template><el-button
  2.               type="primary"
  3.                v-if="isAdd"icon="el-icon-plus"size="mini"
  4.               v-hasPermi="['manager:trader:add']"
  5.               @click="tableAdd"
  6.               :disabled="is10">添加</el-button
  7.             ><el-button
  8.               type="primary"
  9.               @click="dataSave"
  10.               v-else
  11.               size="mini"
  12.               :disabled="nonum"
  13.               v-hasPermi="['manager:trader:edit']">{{isSave ? "保存":"取消"}}</el-button
  14.             ></template><el-table border  v-loading="loading" :data="tableData"><el-table-column label="日期"align="right"><el-table-column prop="name"align="center"label="汇率"><el-table-column
  15.             width="100px"prop="tableName"align="center"label="星期"><template slot-scope="scope"><div>{{ tableData[scope.$index].name }}</div></template></el-table-column></el-table-column></el-table-column><el-table-column
  16.         align="center"
  17.         v-for="(item, index) in headerData.length"
  18.         :key="index"><template slot-scope="scope"><div v-if="islastDay(headerData[index])"><el-input type="number" v-model="tableData[scope.$index].data[index]" @input="updataInput(tableData[scope.$index].data[index],tableData[scope.$index].ids[index],scope.$index,index)" controls-position="right"></el-input></div><div v-else>{{ tableData[scope.$index].data[index]}}</div></template><!-- 时间区域 --><template slot="header" slot-scope="{ $index }">{{ headerData[$index-1]}}</template></el-table-column><!-- 添加区域 --><el-table-column
  19.         align="center"
  20.         v-for="(item, index) in tableAdds"
  21.         :key="index + Date()"><template slot-scope="scope" v-if="tableAdds.length > 0"><el-input v-model="tableAdds[0]['data'+scope.$index]" controls-position="right"></el-input></template><template slot="header">{{ newTime }}</template></el-table-column></el-table></div></template>

script部分

  1. export default {
  2.   name: "trader",
  3.   components: {},
  4.   data(){return{
  5.       width:"100%",
  6.       height:"400px",
  7.       is10:false,//数据是否已添加到10天后
  8.       loading:false,
  9.       cancel: false, //是否取消添加数据
  10.       isAdd: true, //是否添加数据
  11.       isSave:false,//是否保存
  12.       loading: false, // 遮罩层
  13.       ids: [], // 选中数组
  14.       single: true, // 非单个禁用
  15.       multiple: true, // 非多个禁用
  16.       showSearch: true, // 显示搜索条件
  17.       tableName: [],
  18.       tableData: [{
  19.         name:'星期一',
  20.         data:[0.11,0.51]},{
  21.         name:'星期二',
  22.         data:[0.32,0.22]}], //表格数据
  23.       headerData:['2022-08-25','2022-08-26'],//表格表头
  24.       tableAdds: [], //添加的数据
  25.       total: 0, // 总条数
  26.       title: "", // 弹出层标题
  27.       open: false, // 是否显示弹出层
  28.       mustHitOptions: [], // 是否必中，0是  1否字典
  29.       claimTypeOptions: [], // 领取类型字典
  30.       prizeRewardOptions: [], // 是否有奖字典 0无奖 1有奖
  31.       statusOptions: [], // 状态字典
  32.       queryParams: {
  33.         queryTime: "",
  34.       }, // 查询参数
  35.       newTime:undefined, // 新增的时间
  36.       nonum:false,
  37.       isUpdata:false,// 是否是修改操作
  38.       upDated:{}, //修改后的数据（这里用对象可去重）
  39.       aaa:[]};},
  40.   watch:{
  41.     //监听是否全部填写
  42.     tableAdds:{
  43.        handler(val, oldVal){
  44.          this.isSave = this.is0();
  45.          if(this.isSave){
  46.            this.isAdd =false;}},
  47.        deep: true},
  48.     //时间输入框
  49.     'queryParams.queryTime'(val){
  50.       if(val ==''){}}},
  51.   created(){
  52.     //this.getList();},
  53.   methods: {
  54.     //判断每列数据是否全部填写  是返回true 否则false
  55.     is0(){
  56.          var is0;
  57.           const adds = this.tableAdds[0];
  58.          if(this.tableAdds.length >0){
  59.            for(let i in adds){
  60.              if(adds[i]==''){
  61.                 is0 =false;break;}
  62.               else{
  63.                 is0 =true;}}}else{
  64.            is0 =false;}return is0;},
  65.     //判断日期是否超过今天 超过返回true  不超过返回false
  66.     islastDay(nowtime){
  67.        var fan =false;
  68.        var timearr = nowtime.split('-');
  69.        var Year = new Date().getFullYear();//当前年
  70.        var Month = new Date().getMonth() + 1;//当前月
  71.        var Day = new Date().getDate();//当前日
  72.        if(timearr[0]> Year ||(timearr[0]== Year && timearr[1]> Month)||(timearr[1]== Month && timearr[2]> Day)){
  73.          fan =true;}
  74.        else{
  75.          fan =false;}return fan;},
  76.     //input修改事件
  77.     //参数1:当前汇率  参数2:当前汇率对应的id
  78.     //参数3:tableData的索引  参数4:当前汇率对应的id的索引
  79.     updataInput(num,fromid,dataindex,idsindex){
  80.       const arr =[];
  81.       const tableData = this.tableData;
  82.       const headerData = this.headerData;
  83.       //遍历出全部数据
  84.        for(let j=0;j<tableData.length;j++){
  85.           for(let i=0;i<headerData.length;i++){
  86.               arr.push({
  87.               //'createTime':headerData[i],
  88.               //'cardId':tableData[j].cardId,
  89.               'id':tableData[j].ids[i],
  90.               'moneyRate':tableData[j].data[i],
  91.             })}}
  92.         //遍历出修改了的数据
  93.         for(let k=0;k<arr.length;k++){
  94.           if(arr[k].id == fromid){
  95.             this.upDated[fromid]= arr[k];}}
  97.       this.isAdd =false;
  98.       this.isSave =true;
  99.       this.isUpdata =true;
  100.       // if(num < -3 || num >3){
  101.       //   this.$message({
  102.       //     message: '汇率配置范围-3至3',
  103.       //     type: 'warning'
  104.       //   });
  105.       //   if(num < -3) this.tableData[dataindex].data[idsindex]= -3;
  106.       //   if(num >3) this.tableData[dataindex].data[idsindex]=3;
  107.       //    }
  108.       if(num ===''|| num === undefined || num === null){
  109.          this.$message({
  110.             message: '请配置汇率',
  111.             type: 'warning'});
  112.          this.nonum =true;}
  113.       else{
  114.          this.nonum =false;}},
  115.     //保存或取消
  116.     dataSave(){
  117.       if(this.isSave){
  118.         this.addFn();}
  119.       else{
  120.          this.tableAdds =[];
  121.          this.isAdd =true;}},
  122.     //保存数据
  123.     addFn(){
  124.        if(this.isUpdata){//是修改
  125.        const data =[];
  126.        const xindata ={};
  127.         const xin2data =[];
  128.        const upDated = this.upDated;
  129.        //对象转数组
  130.        for(let item in upDated){
  131.            data.push(upDated[item]);}
  132.         updateTrader(data).then(response=>{
  133.           if(response.code ==200){
  134.             this.$message.success("修改成功");
  135.             this.isAdd =true;
  136.             this.getList();}})}
  137.        else{//是新增
  138.           const arr =[];
  139.           const adds = this.tableAdds[0];
  140.           const tableData = this.tableData;
  141.           for(let i in adds){
  142.               arr.push({
  143.                 moneyRate:adds[i]})}
  144.           for(let j=0;j<tableData.length;j++){
  145.             arr[j].cardId = tableData[j].cardId
  146.           }
  147.           const data={
  148.             createTime:this.newTime,
  149.             tabData:arr
  150.           }
  151.           addTrader(data).then(response=>{
  152.             if(response.code ==200){
  153.               this.$message.success("添加成功");
  154.               this.isAdd =true;
  155.               this.tableAdds =[];
  156.               this.getList();}})}},
  157.     // 添加操作
  158.     tableAdd(){
  159.         this.isAdd =false;
  160.         //获取到表格最后一个时间加一天
  161.         let endtime = this.headerData.length ==0 ? this.formatDay(new Date().getTime()): this.headerData[this.headerData.length-1];
  162.         this.newTime = this.formatDay(new Date(endtime).getTime() + 3600 * 1000 * 24);
  164.          //确保10条数据（数据大于10条，删除首条）
  165.         const tableData = this.tableData;let datalength = this.headerData.length;
  166.           if(datalength >=10){
  167.             for(let i =0;i<tableData.length;i++){
  168.               tableData[i].data.splice(0,1);}
  169.           this.headerData.splice(0,1);}
  170.         const add={};
  171.         for(var i =0;i<tableData.length;i++){
  172.           add['data'+i]='';}
  173.         this.tableAdds.push(add);},
  174.     /**
  175.      * 日期格式化
  176.      */
  177.     formatDay(cellValue){if(cellValue == null || cellValue =="")return"";
  178.       var date= new Date(cellValue);
  179.       var year = date.getFullYear();
  180.       var month = date.getMonth() + 1<10 ? '0' + (date.getMonth() + 1): date.getMonth() + 1;
  181.       var day = date.getDate()<10 ? '0' + date.getDate(): date.getDate();return year + '-' + month + '-' + day;}},
  182. };

返回表头的长度对应数据的长度，这是关键，否则表格不成立
必须要后端配合返回相应的数据结构哦

  1.       tableData: [{
  2.         name:'星期一',
  3.         data:[0.11,0.51]},{
  4.         name:'星期二',
  5.         data:[0.32,0.22]}], //表格数据
  6.       headerData:['2022-08-25','2022-08-26'],//表格表头

css

  1. <style lang="scss" scoped>
  2. // 给表头加斜线的css
  3. ::v-deep .el-table th {
  4.   overflow: initial;}
  5. ::v-deep .el-table .el-table__header-wrapper th {
  6.   height: 30px !important;}
  7. ::v-deep .el-table--medium th {
  8.   padding: 0!important;}
  9. ::v-deep .el-table thead tr:first-of-type th:first-of-type,
  10. ::v-deep .el-table thead tr:nth-of-type(2) th:first-of-type {
  11.   border-bottom: none;}
  12. ::v-deep .el-table thead tr:first-of-type th:first-of-type .cell {
  13.   text-align: right;}
  14. ::v-deep .el-table thead tr:nth-of-type(2) th:first-of-type .cell {
  15.   padding-left: 0;
  16.   position: absolute;
  17.   top: 12px;
  18.   left: 16px;
  19.   z-index: 99;}
  20. ::v-deep .el-table thead tr:last-of-type th:first-of-type .cell {
  21.   text-align: left;}
  22. ::v-deep .el-table thead tr:first-of-type th:first-of-type:before,
  23. ::v-deep .el-table thead tr:last-of-type th:first-of-type:before {
  24.   content: "";
  25.   position: absolute;
  26.   width: 1px;
  27.   background-color: #dfe6ec;
  28.   display: block;}
  29. ::v-deep .el-table thead tr:first-of-type th:first-of-type:before {
  30.   height: 198px; //根据情况调整
  31.   top: 0;
  32.   left: 0; //根据情况调整
  33.   transform: rotate(-32deg); //根据情况调整
  34.   transform-origin: top;
  35.   z-index: 2;}
  36. ::v-deep .el-table thead tr:last-of-type th:first-of-type:before {
  37.   height: 112px; //根据情况调整
  38.   top: -60px;
  39.   left: 0; //根据情况调整
  40.   transform: rotate(-62deg); //根据情况调整
  41.   transform-origin: top;
  42.   z-index: 2;}
  43. ::v-deep .el-input{
  44.   width: 90%;
  45.   .el-input__decrease,.el-input__increase{
  46.     background: #FFFFFF;}}</style>

当我们需要覆盖element-ui中的样式时只能通过深度作用选择器，即::v-deep，也叫样式穿透

总结

不论遇到一些多棘手的需要，首先要先静下心去思考，其次多看文档，利用文档里的方法或一些参数，相互结合去寻求解决的办法，举一反三，多尝试。

✨原 创 不 易 ， 还 希 望 各 位 支 持
👍 点 赞 ， 你 的 认 可 是 我 创 作 的 动 力 ！
⭐️ 收 藏 ， 你 的 青 睐 是 我 努 力 的 方 向 ！
✏️ 评 论 ， 你 的 意 见 是 我 进 步 的 财 富 ！

标签： 前端 javascript elementui
本文转载自: https://blog.csdn.net/qq_37215621/article/details/126653345
版权归原作者 北京前端 年薪100w+ 所有， 如有侵权，请联系我们删除。
登录后发布评论

“el-table表格还可以这么玩”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航
没有找到文章内容分段。。。