element中的常用样式修改
一:element中修改下拉框中的icon
例如:
![](https://img2018.cnblogs.com/blog/1423781/201907/1423781-20190701115546642-984638242.png)
<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里面;
![](https://img2018.cnblogs.com/blog/1423781/201907/1423781-20190701115952963-328975677.png)
css部分:
/deep/ .el-select__caret:before{
content: "\e78f";
font-size: 18px;
}
二:在element下拉框中添加搜索项;
如图:
![](https://img2018.cnblogs.com/blog/1423781/201907/1423781-20190701140526959-148767566.png)
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中修改时间选择器中的按钮样式;
列入:去掉底部某个按钮
![](https://img2018.cnblogs.com/blog/1423781/201907/1423781-20190704113205767-270843711.png)
![](https://img2018.cnblogs.com/blog/1423781/201907/1423781-20190704113123050-1616031067.png)
<el-date-picker v-model="valueTime" type="datetime" placeholder="选择日期时间"> </el-date-picker>
其实对很多来说,肯定想的是隐藏其样式不就好了,一般我们用了scss,scop,样式会受其影响,我们此时在class名前面加上/deep/还是不会生效。去掉scop也不生效;
方法一: /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中表头和列表中添加内容;
例如:
![](https://img2018.cnblogs.com/blog/1423781/201907/1423781-20190701133350318-226771073.png)
<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: '普陀区' } ]