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="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: '普陀區'
}
]