表格里引入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

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐