DIV + CSS学习应用解决方案
15
Mar.2021
element-UI的级联选择器如何开启多选模式:el-cascader-multi
el-cascader的props属性增加 multiple: true 即可实现多选功能
<template>
<div>
<el-cascader
ref="cascaderArea"
v-model="temp.areaIds"
filterable
clearable
show-checkbox
:show-all-levels="false"
:options="areaIdsOptions"
:props="areaIdsProps"
placeholder="所在区域"
style="width: 200px;"
@change="handleChangeArea"
/>
</div>
</template>
<script>
data() {
return {
areaIdsOptions: [],
areaIdsProps: {
multiple: true, // 启用多选功能
value: 'id',
label: 'areaName',
children: 'children'
},
}
}
<script>
el-cascader的props属性增加 multiple: true 即可实现多选功能
<template>
<div>
<el-cascader
ref="cascaderArea"
v-model="temp.areaIds"
filterable
clearable
show-checkbox
:show-all-levels="false"
:options="areaIdsOptions"
:props="areaIdsProps"
placeholder="所在区域"
style="width: 200px;"
@change="handleChangeArea"
/>
</div>
</template>
<script>
data() {
return {
areaIdsOptions: [],
areaIdsProps: {
multiple: true, // 启用多选功能
value: 'id',
label: 'areaName',
children: 'children'
},
}
}
<script>
1
Jan.2021
<el-date-picker
v-model="dateRange"
type="daterange"
align="right"
style="margin-right: 10px;"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
format="yyyy年MM月dd日"
value-format="yyyy-MM-dd"
class="filter-item"
@keyup.enter.native="handleFilter"
/>
在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。
1
Jan.2021
今天是2021年元旦，新年第一天的第一篇博文！ 艰难的2020终于过去了，希望牛年的2021能不忘初心，再接再励，大展宏图！
最近使用element ui中的表格合计时，经常会出现表格列中带小数的表尾合计列精度缺失问题，会出现很多位小数，如下图：
解决方法：
在合计结果处使用 toFixed(2) // 保留2位小数，解决小数列合计精度缺失的问题，具体代码如下
最近使用element ui中的表格合计时，经常会出现表格列中带小数的表尾合计列精度缺失问题，会出现很多位小数，如下图：
解决方法：
在合计结果处使用 toFixed(2) // 保留2位小数，解决小数列合计精度缺失的问题，具体代码如下
24
Jul.2014
先看案例：天猫店http://xxhshipin.tmall.com 淘宝店：http://666hsh.taobao.com
模块使用说明：
此模块只有短短不到十行代码，并且未调用任何Widget组件，纯CSS实现，大家可能会奇怪，为什么没有调用Widget组件，也可以实现全屏？哈哈，因为调用了模板class，大家看代码中的 class="footer-more-trigger"，这个footer-more-trigger就是模板自带的class，那这个class包含哪些css呢？请看以下代码：
.footer-more-trigger {
position: absolute;
padding: 6px 11px 4px 14px;
width: 37px;
line-height: 1.3;
border: 1px solid #fff;
left: -12px;
top: -5px;
}
模块使用说明：
此模块只有短短不到十行代码，并且未调用任何Widget组件，纯CSS实现，大家可能会奇怪，为什么没有调用Widget组件，也可以实现全屏？哈哈，因为调用了模板class，大家看代码中的 class="footer-more-trigger"，这个footer-more-trigger就是模板自带的class，那这个class包含哪些css呢？请看以下代码：
.footer-more-trigger {
position: absolute;
padding: 6px 11px 4px 14px;
width: 37px;
line-height: 1.3;
border: 1px solid #fff;
left: -12px;
top: -5px;
}
29
Oct.2013
利用CSS3动画属性“@keyframes ”可实现一些动态特效，具体语法和参数可以网上自行学习，这篇文章主要是实践应用一下这个动画属性，实现页面淡入特效，在火狐24版、chrome29版、IE10中测试通过。IE9以下浏览不支持此特效。
淡入代码：
淡入代码：
27
Jun.2012
在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，无论是初接触 Web 标准还是接触标准已久的朋友，大都会对这一属性感觉很迷惑和模糊。
display:inline-block
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
但对于这个属性不是所有浏览器都识别。
支持的浏览器有：Opera、Safari。
display:inline-block
将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。
但对于这个属性不是所有浏览器都识别。
支持的浏览器有：Opera、Safari。
