element 自定义下拉框中的文本内容

样式展示:
在这里插入图片描述

<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设定好高度

(如果有更好的方法,请在评论中打出,谢谢)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值