Element-ui el-select 选择器(下拉框) 修改样式
表格里引入el-select,根据需求修改下拉框样式。
·
表格里引入el-select,根据需求修改下拉框样式
<!-- 表格列表 S-->
<div class="opus-table" id="opusTable">
<el-table
:data="tableData"
border
ref="table"
@selection-change="handleSelectionChange"
>
<el-table-column
type="index"
label="序号"
align="center"
width="80"
></el-table-column>
<el-table-column
prop=" "
label="xxx"
align="center"
width="200"
>
</el-table-column>
<el-table-column
width="280"
prop=" "
label="xxx"
align="center"
></el-table-column>
<el-table-column label="xxx" align="center">
<template slot-scope="scope">{{
scope.row.admissibleDate | fltDateTime("{y}-{m}-{d}")
}}</template>
</el-table-column>
<el-table-column label="xxx" align="center">
<template slot-scope="scope">{{
scope.row.registerDate | fltDateTime("{y}-{m}-{d}")
}}</template>
</el-table-column>
<el-table-column
prop=" "
label="xxx"
align="center"
></el-table-column>
<el-table-column
prop=" "
label="xxx"
align="center"
></el-table-column>
<el-table-column
prop=" "
label="xxx"
align="center"
></el-table-column>
<el-table-column
prop=" "
label="xxx"
align="center"
></el-table-column>
<el-table-column
prop=" "
label="xxx"
align="center"
></el-table-column>
<!-- 操作 -->
<el-table-column prop="oper" label="操作" align="center" width="155">
<template slot-scope="scope">
<el-select
class="my-el-select"
target="_blank"
@change="openPDF"
placeholder="查看电子证书"
>
<el-option
v-for="item in scope.row.entitys"
:key="index"
:label="item.ectypeAmount"
:value="item.certPath"
></el-option>
</el-select>
</template>
</el-table-column>
<!-- 操作 -->
</el-table>
</div>
<!-- 表格列表 E-->
<script>
data() {
return {
queryForm: {
flowNumber: "",
kind: "",
applyPeople: "",
agentPeople: "",
startDate: "",
endDate: "",
},
admissibleDate: [],
tableData: [],
pageNum: 1,
pageSize: 20,
total: 1,
};
},
methods: {
/***
* 查询
*/
search() {
let nodeCode = "S_DISTRIBUTE";
let userId = this.userInfo.id;
let displayLabel = "DONE";
let data = {
flowNumber: this.queryForm.flowNumber,
kind: this.queryForm.kind,
applyPeople: this.queryForm.applyPeople,
agentPeople: this.queryForm.agentPeople,
startAdmissibleDate: this.queryForm.startDate,
endAdmissibleDate: this.queryForm.endDate,
pageNum: this.pageNum,
pageSize: this.pageSize,
};
api.xxx(nodeCode, userId, displayLabel, data).then((res) => {
if (res.data) {
// 拼装数据
for (var i = 0; res.data.list && i < res.data.list.length; i++) {
if (!res.data.list[i].entitys && res.data.list[i] == null) {
this.tableData.push(res.data.list[i]);
continue;
}
let entitys = [];
if( res.data.list[i].entitys) {
res.data.list[i].entitys.forEach((item) => {
if (item.isLetter === "1") {
item.ectypeAmount = "正本";
} else {
item.ectypeAmount = "副本" + item.ectypeAmount;
}
entitys.push(item);
});
}
res.data.list[i].entitys = entitys;
}
this.tableData = res.data.list;
this.total = res.data.paging.total;
}
});
},
/***
* 查看电子证书
*/
openPDF(url) {
window.open(
IMG_HOST + url
);
},
}
</script>
接口返回数据:
修改前:
需求:
1.表格里引入插件el-select,但是不需要边框线条
CSS代码:
<style scoped>
/* el-select去掉边框 */
.my-el-select /deep/ .el-input .el-input__inner {
border-color: #ffffff !important;
}
</style>
修改后:
2.表格里引入插件el-select,修改占位符字体颜色为蓝色
CSS代码:
<style scoped>
/* el-select占位符字体颜色修改 */
/* 谷歌 */
.my-el-select /deep/ .el-input__inner::placeholder {
color: #296dd3;
text-align: center;
}
</style>
修改后:
注意: 权重问题!!!
/ deep /
!important
更多推荐
已为社区贡献1条内容
所有评论(0)