样式展示:
<el-table-column prop="useQuantity" align="center"
:filter-multiple="false"
:column-key="'type'">
<span slot="header" slot-scope="{}" class="weekSelect" @click="filterChange">
<el-select ref="selecRef" v-model="value">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
//在下拉框中的每一个item项的右侧添加按钮或其他的样式
// option中的遍历的每一项,必须添加这个
<span style="float: left">{{ item.label }}</span>
//每一个item项右侧要显示的内容
<span style="float: right; color: #8492a6; font-size: 13px" @click.stop="seltf">{{ selfName }}</span>
</el-option>
// 下拉框中自定义下拉框中底部的内容
<p class="selfDefined">
<span>自定义</span>
</p>
<div style="width: 256px;">
<el-input v-model="tianshu" class="input-with-select">
//实现输入的内容都会添加个天
<el-button slot="append">天</el-button>
</el-input>
<div class="changyong">设为常用</div>
</div>
<div style="text-align:center" class="salesConfirm">
<el-divider></el-divider>
// 实现点击确认后实现接口调用和下拉框消失
<el-button size="small" type="primary" @click="confirmBill">确认</el-button>
<el-button size="small" type="primary">取消</el-button>
</div>
</el-select>
</span>
</el-table-column>
js部分
//点击确定隐藏掉下拉框
confirmBill() {
(this.$refs.selecRef as any).blur()
}
后半部分
//下拉框中出去select中出去option中的其他项
selfName:any = "设为默认"
seltf(val:any) {
//点击默认其他的变成设为默认
if (val.target.innerText === "设为默认") {
this.options.forEach((item:any, index:any) => {
val.target.parentNode.parentNode.children[index].children[1].innerText = "设为默认"
})
val.target.innerText = "默认"
} else {
val.target.innerText = "设为默认"
}
}
样式调整
(可能不全,如有错误请提出)
.selfDefined{
font-family: 'PingFangSC-Regular', 'PingFang SC';
font-weight: 400;
font-style: normal;
color: #D9D9D9;
padding-top: 4px;
margin-left: 16px;
}
.el-input-group{
width: 45%;
margin-left: 16px;
padding:0px 4px 0px 4px;
.el-input__inner{
height: 50px;
}
}
.salesConfirm{
.el-divider{
margin: 8px 0px 8px 0px;
}
}
.changyong{
float:right;
padding: 6px 32px 0px 0px;
}
::v-deep {
.weekSelect{
.el-input__inner{
background-color: #EEF1F6;
border: 0px;
padding: 0px 6px 0px 6px;
font-size: 14px;
font-weight: 700;
color: #606266;
}
}
}
基本就需要改动这些,就可以将下拉框嵌套在table表格的表头中
需要改动自定义及其按钮的位置在下拉框中不变的话,可以直接给这部分加上定位,并且在自定义之前加一个div设定好高度
(如果有更好的方法,请在评论中打出,谢谢)