(项目实操中对element-ui和echarts进行调整时的问题记录)
el-table
表格标题居中
<el-table :header-cell-style="{'text-align':'center'}"></el-table>
表格单元格中文本居中
<el-table :cell-style="{'text-align':'center'}" ></el-table>
表格某一列居中/对齐
先把el-table中的:cell-style属性删掉 ,然后在对应列标签上添加align='center'
自定义斑马纹
自定义行斑马纹
//HTML table标签添加属性
<el-table :data="tableData" :row-class-name="tabRowClassName">
</el-table>
//在methods通过方法计算返回对应class样式
tabRowClassName({row,rowIndex}){
let index = rowIndex + 1;
if(index %2 == 0){
return 'warning-row'
}
}
//CSS 样式添加
.el-table .warning-row{
background:#F3F9FF
}
自定义列斑马纹
1.给列标题加颜色
:header-cell-style="{'text-align':'center','background':'#cddef3'}"
2.给列加颜色
:cell-style="tabColClassName"
function tabColClassName({row,column,rowIndex,columnIndex}){
console.log(column,columnIndex,'-----------------')
let index = columnIndex + 1;
if(index %2 == 0){
return 'background:#cddef3'
}}
el-pagination
分页器居中
最简单的方法:直接在分页器外面套一个大盒子,设置padding-left:45%;
(具体比例需要结合分页器内容的长度和html大概去计算一下,保证他居中,看了好多博文感觉太复杂了)
<div class="paginationDiv">
<el-pagination
v-model="pageNo"
:page-sizes="pageSizes"
:page-size="pageSize"
layout="sizes, prev, pager, next"
:total="tableData.length"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
//css部分
.paginationDiv{
padding-left:50%;
}
el-button自定义颜色
<el-button type="success">搜索</el-button>
//css
.el-button--success{background: #23C6C8;}
el-date-picker
修改时间选择器下拉框的大小
el-dialog对默认样式的修改
element-ui如何修改el-dialog的样式? - 钟小嘿 - 博客园
el-form-item中表单项label和表单项内容换行
<el-form label-position="top"> </ el-form>
渐变色配置
series: [
{
name:'邮件营销',
type:'line',
areaStyle: {normal: {
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{offset: 0, color: 'red'},
{offset: 0.5, color: 'pink'},
{offset: 1, color: '#ddd'}
]
)
}},
data:[120, 132, 101, 134, 90, 230, 210]
}
]