一：element中修改下拉框中的icon
例如：
<el-select v-model="value" filterable clearable placeholder="請選擇">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
//咱們要更改其icon,首先打開element官網：https://element.eleme.cn/#/zh-CN/component/icon，找到想要更改的圖標便可。替換content裏面的值。
若是裏面沒有咱們想要的圖標能夠把阿里圖標加入到element裏面；
css部分：
/deep/ .el-select__caret:before{
content: "\e78f";
font-size: 18px;
}
二：在element下拉框中添加搜索項；
如圖：
data中： arr: [{ id: 1, label: 'qqq' }, { id: 2, label: 'www' }, { id: 3, label: 'eee' }], methods: { myfilter () { let queryString = this.keyWord let restaurants = this.basearr let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants this.arr = results } }
<el-select v-model="value"> <el-input v-model="keyWord" v-on:input="myfilter" placeholder="輸入關鍵字搜索"> <i slot="suffix" class="el-input__icon el-icon-search"></i> </el-input> <el-option v-for="(item,index) in arr" :key="index" :value="item.id" :label="item.label">
</el-option> </el-select>
三：在element中修改時間選擇器中的按鈕樣式；css
列入：去掉底部某個按鈕this
<el-date-picker v-model="valueTime" type="datetime" placeholder="選擇日期時間"> </el-date-picker>
其實對不少來講，確定想的是隱藏其樣式不就行了，通常咱們用了scss,scop，樣式會受其影響，咱們此時在class名前面加上/deep/仍是不會生效。去掉scop也不生效；spa
方法一： /deep/ .el-picker-panel{ /deep/ .el-picker-panel__footer{ /deep/ .el-button--text{ display:none!important; } } }
若是此種方法也不生效。那咱們須要用另一種方法；
方法二： <script src="./script.js"></script> <style> .el-picker-panel .el-picker-panel__footer .el-button--text{ display:none!important; } </style> 注意：必定要把這個style樣式寫在scss樣式前面 <style lang="scss" src="./style.scss" scoped></style>
四：在element中表頭和列表中添加內容；
例如：
<el-table :data="tableData" style="width: 100%;margin-top:20px;" height="auto"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column fixed prop="date" label="日期" align="center" width="150"></el-table-column> <el-table-column prop="name" label="姓名" align="center" width="120"></el-table-column> <el-table-column prop="name" align="center" width="180"> <template slot="header"> //在頭部添加搜索框 <el-input v-model="search" size="mini" placeholder="輸入關鍵字搜索"> <i slot="suffix" class="el-input__icon el-icon-search"></i> </el-input> </template> </el-table-column> <el-table-column prop="city" label="市區" align="center" width="120"> <template slot="header"> //在頭部添加下拉菜單 <el-dropdown trigger="click" @command="handleCommand2" size="mini"> <span> 市區 <i class="el-icon-arrow-down el-icon--right"></i> </span> <el-dropdown-menu slot="dropdown"> <el-dropdown-item v-for="item in jobs" :key="item.id" :command="item.label" >{{item.label}}</el-dropdown-item> </el-dropdown-menu> </el-dropdown> </template> </el-table-column> <el-table-column prop="address" label="職務" align="center" width="300"> <template slot-scope="scope"> //在列表中添加select選擇器 <el-select v-model="scope.row.job" value-key="id" placeholder="請選擇職務" size="mini" clearable :disabled="scope.row.checked == true" > <el-option v-for="item in jobs" :key="item.id" :label="item.label" :value="item.value" ></el-option> </el-select> </template> </el-table-column> <el-table-column prop="zip" label="郵編" align="center" width="120"></el-table-column> </el-table> 在<template slot-scope="scope"> </template>中添加本身要修改的內容； data： tableData: [{ date: '2016-05-03', name: '王小虎', province: '上海', city: '普陀區', address: '上海市普陀區金沙江路 1518 弄', zip: 200333 }, { date: '2016-05-02', name: '王小虎', province: '上海', city: '普陀區', address: '上海市普陀區金沙江路 1518 弄', zip: 200333 }], search: '請輸入名字', jobs: [ { id: 1, label: '閔行區', value: '閔行區' }, { id: 2, label: '黃浦區', value: '黃浦區' }, { id: 3, label: '普陀區', value: '普陀區' } ]