element-ui echarts

（项目实操中对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]
        }
    ]