element中的常用样式修改

一：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中修改时间选择器中的按钮样式；

列入：去掉底部某个按钮

 <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中表头和列表中添加内容；

例如：

 

<el-table :data="tableData" style=" 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: '普陀区'
}
]