明天也要努力的博客

在 el-table-column 上需根据不同 v-if 条件来控制列显隐时，就会出现列数据展示错乱的情况（要么 A 列的数据显示在 B 列上，或者后端返回有数据的但是显示的为空），如下所示。，这样渲染的时候就不会因为复用原则导致列数据混乱了。关于key值，一般习惯使用字段名，也可随机生成一个值，只要具有唯一性就可以。

需求：通常我们动态修改 div 元素的样式，使用 :style 和 :class 即可；但想要动态修改 如：Element-ui 中输入框（input）组件的字体颜色时，由于 el-input 的样式嵌套很深，需要修改的实际是 .el-input__inner 这个样式类的 color，但我们在 HTML 中没法直接拿到这个类名。声明变量颜色 colorVal 如： red，并在需要修改的地方，为 --inputColor 变量赋值；为对应的 CSS 类引入变量 --inputColor；

css设置超出显示省略号可分两种情况：但使用的核心代码是一样的：需要先使用 “overflow:hidden;” 来把超出的部分隐藏，然后使用“text-overflow:ellipsis;”当文本超出时显示为省略号。思路：1、使用 overflow:hidden; 语句不显示超过对象尺寸的内容，就是把超出的部分隐藏了；2、使用 -webkit-line-clamp: 行数; 语句限制显示文本的行数；3、使用 text-overflow:ellipsis; 语句用省略号“…”隐藏超出范围的文本说明

CSS中的 @supports 用于检测浏览器是否支持 CSS 的某个属性。其实就是条件判断，如果支持某个属性可以写一套样式，如果不支持某个属性，可以提供另外一套样式作为替补。可以放在代码的顶层，也可以嵌套在任何其他条件组规则中。@supports 规则由一组样式声明和一条支持条件构成。支持条件由一条或多条使用 逻辑与（and）、逻辑或（or）、逻辑非（not）结合的名称 - 值对（name-value pair）组成。可以使用圆括号调整操作符的优先级。声明语法最基本的支持条件就是 CSS 声明，也就是一

在 iphone X 之后引入了一个新概念：“safe area（安全区域）”，安全区域指屏幕内不受圆角、齐刘海、底部小黑条等元素影响的可视窗口。如下图：从 iOS11 开始 ，为了适配刘海屏，Apple 公司对 HTML 的 viewport meta 标签做了扩展viewport-fit 属性使用 @supports 查询机型是否支持 constant() / env() 实现兼容代码隔离，个别安卓也会成功进入这个判断，因此加上-webkit-overflow-scrolling: touch的判

自定义属性（有时也被称作CSS变量或者级联变量）是由CSS作者定义的，它包含的值可以在整个文档中重复使用。由自定义属性标记设定值（比如： --main-color: black;），由 var() 函数来获取值（比如： color: var(–main-color);）复杂的网站都会有大量的CSS代码，通常也会有许多重复的值。举例：同样一个颜色值可能在成千上百个地方被使用到，如果这个值发生了变化，需要全局搜索并且一个一个替换。自定义属性在某个地方存储一个值，然后在其他许多地方引用它。另一个好处是语义

问题：input 输入框在 Android 系统可以输入和点击，但是在 iOS 系统上 input 输入框无法点击和输入。

1. 问题我们使用CSS为字体设置：font-size 后，发现高度会比正常UI设计的要高一些，字体的上下存在一部分留白区域占位置。如图所示：.test{ font-size: 24px;}2. 解决方法原因： 字体有默认行高。方法一：给它设置 line-height 为 1；.test{ font-size: 24px; line-height: 1;}方法二：给它设置 line-height 等于它的 font-size；.test{ font-siz

传送门：Scss 基本使用（变量、嵌套）传送门：Sass中文网传送门：Sass 教程 | 菜鸟教程1. 继承（ @extend ）@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。<style lang="scss">.contanier1{ font-size: 24px; font-weight: bold; color: green;}.contani

2020年4月8日，Firefox 浏览器支持了 CSS 比较函数 min()，max()，clamp()，这意味着现在所有主流浏览器都支持它们。 这些CSS 函数的作用：可以提供动态布局和更灵活设计组件方法。简单的这些元素主要用来设置元素尺寸，如容器大小，字体大小，内距，外距等等 。在这篇文章中，我将用一些示例和大家一起来探讨这几个函数在实际中的使用，希望能更好的帮助大家理解它们。1. 兼容性min() 和 max() 的支持情况：clamp() 的支持情况：2. min() 函数min

1. 索引栏（IndexBar ）自定义使用传送门：Vue中 引入使用 js-pinyin 实现汉字转拼音完整代码：<template> <div class="wrap"> <van-index-bar highlight-color="#1989fa" :index-list="indexList"> <div v-for="item in filterData" :key="item.letter"&gt

1. 简介注意：本文 Element-ui 版本 2.11.1及以上Element-ui 官方文档中有大图预览相关组件 传送门：Element-ui 图片组件，但我们不想通过使用 Image 组件的方式（先默认显示预览图片，再通过点击图片实现大图预览查看），又想实现直接预览大图的功能是否可行呢？答案是当然可以。2. 图片查看器（el-image-viewer) 的使用翻看了 Image 的源码，发现实现大图预览的是一个小组件 image-viewer。打开看看它的 props，如下：props

1. Scss 简介Sass (Syntactically Awesome Stylesheets) 是一种动态样式语言，Sass 语法属于缩排语法，比 css 比多出好些功能 (如：变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。Sass 的缩排语法，对于写惯 css 前端的 web 开发者来说很不直观，也不能将 css 代码加入到 Sass 里面。因此对 Sass 语法进行了改良，Sass3 就变成了 Scss(Sassy CSS)。SCSS(Sassy CSS) 是

基础姿势/自定义姿势<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px"> <el-form-item label="活动名称" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item> <el-form-item label="年龄

问题：Element-ui中，表格（Table）的 toggleRowSelection 方法无法默认选中的情况。需求：对将设置为选中的内容进行部分修改，如：默认选中的内容必须得通过接口或者其他方式来获取，然后再默认选中。官方代码：<template> <div class="wrap"> <el-table border ref="multipleTable" :data="tableData" toolt

需求：选择器组件（Select）支持多选，但是不支持全选。如果需要实现这个功能，该怎么修改呢？方案一：下拉项增加一个【全选】，实现以下几种功能下拉选项全都勾选时，【全选】自动勾选；下拉选项部分勾选时，点击【全选】后，所有下拉项全部勾选；下拉选项全都勾选时，点击【全选】后，所有下拉选项不勾选；下拉选项和【全选】都选上的时候，不勾选任意下拉选项，【全选】按钮就不勾选了；效果：方案二：直接添加一个【全选】复选框，实现的功能与方案一相同效果：完整代码父组件<template&g

需求：tree 组件可实现多选，但复选框在树结构中每一层级都有。如果只想某个层级展示复选框且实现单选需要怎么修改呢？思路：原本想通过禁用某些层级的复选框，达到只能某一层数据可选的功能，但是禁用的复选框仍然显示 效果不好。通过审查元素发现被禁用的复选框加上了特殊 “类名”（ is-disabled ） 。因此：我们可以先通过处理 tree 数据的某些层级 disabled 为 true，设置被禁用节点的 display 属性来隐藏该层级复选框。节点单选： 注意：如果要单选，一定要设

本文 Element-ui 版本 2.x需求如下图所示，需要给多选表格添加‘全选’修饰语。方法在 el-table-column 中设置 label 属性并不起作用，因此 ‘全选’ 二字需使用 CSS 来实现。示例完整代码如下：<template> <div class="test"> <el-table ref="multipleTable" :data="tableData" :header-cell-style

本文 Element-ui 版本 2.x问题如下所示，在 Element-ui 的表格组件中 \n 换行转义符并没有起作用。tableData: [ { number: '20160503', name: '王小虎', address: '2016-05-03' + '\n' + '武汉市江夏区文化大道'}, { number: '20160504', name: '张小虎', address: '2019-05-04' + '\n' + '武汉市洪山区洪山侧路'}, {

本文所有案例代码地址案例一因为需求是只写三级，所以控制了只有三级，你们可以根据自己需求来写N级；新增同级和新增下级这个地方，同级是this.$refs.tree.append(treeD, this.currentNode.parent); 下级是this.$refs.tree.append(treeD, this.currentNode);点击弹出增删改方法，用的是 el-dropdown 这个地方最好是用点击的，因为需要先点击才能触发 handleLeftclick() 这个方

问题：Vant框架中输入框field组件绑定的value值不会同步更新到data中定义的的变量上；解决：通过绑定对应的事件，并触发该事件来更新data中定义的变量值；<template> <view class="fill-wrap"> <van-cell-group> <van-field autosize required t...

问题：当对话框 （Dialog）中包含子组件时，我们使用 this.$refs 试图获取该组件的 dom 并操作时，发现获取的 dom 为 undefined 导致后续的方法报错；<template> <div> <el-dialog :visible.sync="propertyDialog" width="60%" center> <lineChart ref="chart" :xAxisArr="xA

元素是文档结构的基础，在 css 里面，每个元素生成了包含内容的框（box）, 大家都叫“盒子”。但是不同的元素显示方式是不同的，有占据一整行的，有水平一个挨着一个的。比如：div 与 span 的显示方式不一样，因为 div是块级元素，会占据一行，而span为行内元素，可多个span放置一行。接下来就详细讲一下在CSS中块级元素、行内元素和行内块级元素的区别。1. 块级元素 block块级元素，顾名思义，该元素呈现“块”状，所以它有自己的宽度和高度，也就是可自定义 width 和 height。除

业务场景：服务端返回两万多条数据需要在下拉框中展示,直接渲染会导致页面卡顿且需要很长时间等待,用户体验极差,所以我们把这个优化一下el-select,直接上代码。相关知识传送门：Vue 2.x实现自定义指令<template> <div class="content"> <el-select v-model="chooseValue" filterable v-el-select-loadmore="loadMore(rangeNumber)">

方法一<template> <div> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-row> <el-col :span="6"> <el-form-item label="金额" prop="money">

前端后台管理会存在很多表格,表格数据过多就需要分页，前端交互每次搜索如果都请求服务器会加大服务器的压力,所以在数据量不是很大的情况下可以一次性将数据返回,前端做检索。1. 效果展示原始数据模糊查询并修改分页2. 完整代码<template> <div > <el-input v-model="searchValue" size="mini" clearable placeholder="请输入编号或城市" style="wid

1. 效果图展示2. 实现思路在 table 组件中，提供了一个属性:span-method,它是一个Function，本身有4个参数，分别是 row , rowIndex , column , columIndex; 这四个值可以直接拿到。先处理连续相同的列的值，做标记，然后，在合并的方法中，根据我们处理好的数组，去对应的合并行或列。3. 完整代码<template> <div> <el-table ref="multipleTab

如果是直接绑定属性，是可以的，但是绑定对象中的属性就需要特别处理，需要在rules中添加双引号 " "<template> <div class="about"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="活动名称" prop="name"&g

需求：使用 el-table 组件调整鼠标悬停某行时，高亮样式方法：<style lang="scss" scoped>.el-table { /deep/tbody tr:hover>td { background-color:#90c0f1； } }</style>

1. 修改单个滚动条样式在对应组件的样式中使用穿透<style lang="scss" scoped>.el-table { /deep/ .el-table__body-wrapper::-webkit-scrollbar { width: 10px; /*滚动条宽度*/ height: 10px; /*滚动条高度*/ } /*定义滚动条轨道 内阴影+圆角*/ /deep/ .el-table__body-wrapper::-webkit-scrollbar-

CSS flex布局语法（侵删）