我是段段的博客

在写项目的时候有时候会经常遇到把行和列合并起来的情况，因为有些数据是重复渲染的，不合并行列会使表格看起来非常的混乱，如下：而我们想要的数据是下面这种情况，将重复的行进行合并，使表格看起来简单明了，如下：所谓的合并行就是将多行相同的数据变成一行来显示，直接上代码，页面的布局比较简单是el-table上属性，其值是一个，objectSpanMethod方法是用来处理合并行的返回值，tableData数据如下：首先需要对数据就行处理，就是比较当前行与上一行的值是否相等（如果是第一行数据，直接将值赋值为1）

在项目中编写数据大屏的时候，除了柱状图、折线图、散点图…，还有，首先想到的是的表格，但是在后续的实现过程中，后端范围的列数是动态的，刚开始没有考虑到，然后采用了第一种方式，但是数据处理方式不太好，后来在Element官网查看了文档，就使用方式进行实现（第二种方式），不过两种方式都需要对数据进行处理第一种方式主要使用循环实现，页面逻辑比较简单，具体布局如下：中数据如下：使用来处理数据，将数据处理成渲染需要的格式，如下：因为列数不固定，需要每一列的宽度也需要动态的计算，通过来实现，具体如下：实现效果图如

目录方式一：使用块级标签方式二：使用模板字符串和换行标签方式三：使用正则替换前言： 最近在写项目中遇到这样一个需求，就是把MessageBox的提示信息换行居中显示，而title和按钮不居中显示实现效果大概是这样的默认效果是这样的然后就在网上查找了几种方法，简单总结一下方式一、方式二适用于前端确定那些文字，然后进行渲染；方式三是根据后端返回的message信息进行处理用到了MessageBox的两个属性参数说明类型可选值默认值dangerouslyUseHTMLS

项目中用到了比较多的Dialog弹框和MessageBox弹框，但是Element原始的组件样式已经不符合项目的风格，所以需要对Element中的样式进行整体修改原始的组件样式如下原始Dialog弹框原始MessageBox弹框直接上修改完成的代码重新写了一个类名oe-dialog-btn，在使用Dialog和MessageBox弹框的地方直接写此类名就好了（可以将修改的样式写在全局公共样式中，这样整个项目都可以用了）/* 修改 取消 按钮默认的边框颜色 */.oe-dialog-bt

文章目录一、随机获取笑话二、查询天气在浏览的时候看到两个有意思的小demo，自己动手写了写，具体如下一、随机获取笑话随机获取笑话的接口请求地址：https://autumnfish.cn/api/joke请求方式：get请求参数：无参数相应内容：一条随机笑话DOM结构比较简单了<div id="app"> <div class="title font-coloe">{{ title }}</div> <div class="

Vue实现选项卡切换前言用原生JS写过一个选项卡切换功能，但是相对比较复杂，然而用Vue实现就相对比较简单了首先需要引入vue.js<!-- 引入vue.js --><script src="./js/vue.js"></script>页面元素的DOM结构也相对比较简单，因为使用了v-for进行循环，比原生JS编写时还要简洁，如下 <div id="app"> <!-- ul用来控制上部分切换模块 --> &lt

前言最近写项目的时候，需要对element中原有的下拉框组件进行整体样式的修改，修改完后简单记录一下原有组件里的el-select下拉框这是修改完成之后的样式页面的DOM元素也是直接使用组件中的例子<template> <div class="wrap"> <div class="dark-select"> 　　<el-select v-model="value" placeholder="请选择" :popper-append-t

前言  在有些场景下，我们需要根据数组的长度或者一个布尔值去把原本可点击区域（如：div或img）的点击事件给禁止掉，变成不可点击事件一、DOM元素，添加class属性首先是获得需要判断是否禁止的条件；可以是某一个变量的布尔值，也可是数组的长度…<img src='@/assets/img/logo.png' @click="onGoIndex()" :class="goIndex ? 'go-index' : 'not-go-index'"而控制点击区域是否可以点击的属性是pointe