element 之 table表格选中加背景色

在这里插入图片描述

 <el-table
            ref="Table"
            border
            :height="tableHeight"
            :data="list"
            @row-dblclick="f_handleRowClick"
            @row-click="f_RowClick"
            :cell-style="$style.cellStyle"
            :header-cell-style="$style.rowClass"
            :row-class-name="tableRowClassName"
            @selection-change="selectionChangeHandler"
          >
            <el-table-column
              class-name="cannotDrag"
              type="selection"
              width="55"
            />
            <el-table-column label="序号" type="index" width="55" />
            <el-table-column
              v-for="item in confirmHead"
              :key="item.label"
              :label="item.label"
              :prop="item.prop"
              :width="item.width"
              align="center"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span v-if="item.outType">
                  <span>{{ OUT_HOUSING_TYPE[scope.row.outType] }}</span>
                </span>
                <span v-else-if="item.deliveryType">
                  <span>{{ DELIVERY_TYP[scope.row.deliveryType] }}</span>
                </span>
                <span
                  v-else-if="item.taskOrder"
                  @click="handleEdit2([scope.row.id], [scope.row.waveNo])"
                >
                  <el-tag v-if="scope.row.taskOrder == 0">{{
                    TASK_ORDER[scope.row.taskOrder]
                  }}</el-tag>
                  <el-tag v-else-if="scope.row.taskOrder == 1" type="success">{{
                    TASK_ORDER[scope.row.taskOrder]
                  }}</el-tag>
                  <el-tag v-else-if="scope.row.taskOrder == 2" type="danger">{{
                    TASK_ORDER[scope.row.taskOrder]
                  }}</el-tag>
                </span>
                <span v-else-if="item.billState">
                  <el-tag type="info" v-if="scope.row.billState == 0">{{
                    OUT_ORDER_STATE[scope.row.billState]
                  }}</el-tag>
                  <el-tag
                    style="
                      background-color: #fff8e3;
                      border-color: #fff8e3;
                      color: #ffbf00;
                    "
                    v-else-if="scope.row.billState == 1"
                    >{{ OUT_ORDER_STATE[scope.row.billState] }}</el-tag
                  >
                  <el-tag
                    style="
                      background: rgba(27, 189, 219, 0.1);
                      color: #1bbddb;
                      border: rgba(27, 189, 219, 0.1);
                    "
                    v-else-if="scope.row.billState == 2"
                    >{{ OUT_ORDER_STATE[scope.row.billState] }}</el-tag
                  >
                  <el-tag v-else-if="scope.row.billState == 3">{{
                    OUT_ORDER_STATE[scope.row.billState]
                  }}</el-tag>
                  <el-tag type="success" v-else-if="scope.row.billState == 4">{{
                    OUT_ORDER_STATE[scope.row.billState]
                  }}</el-tag>
                  <el-tag type="danger" v-else-if="scope.row.billState == 5">{{
                    OUT_ORDER_STATE[scope.row.billState]
                  }}</el-tag>
                </span>
                <span v-else-if="item.omsBillNo">
                  <el-link
                    type="primary"
                    :underline="false"
                    @click="handelOutboundTrackDetail(scope.row.id)"
                    >{{ scope.row.omsBillNo }}
                  </el-link>
                </span>
                <span v-else>{{ scope.row[item.prop] }}</span>
              </template>
            </el-table-column>
            <template slot="empty">
              <img
                src="../../assets/img/empty.png"
                alt=""
                srcset=""
                style="height: calc(100vh - 500px)"
              />
              <h4>暂无数据~</h4>
            </template>
          </el-table>
 data() {
    return {
    multipleSelectionData:[]
    }
 f_handleRowClick(row) {
      this.$refs.Table.toggleRowSelection(row);
    },
      selectionChangeHandler(val) {
      this.multipleSelectionData = val;
    },
      tableRowClassName({ row, rowIndex }) {
      row.row_index = rowIndex;
      for (let i = 0; i < this.multipleSelectionData.length; i++) {
        if (this.multipleSelectionData[i].row_index === rowIndex) {
          return "tableSelectedRowBgColor";
        }
      }
      return "";
    },
<style>
.tableSelectedRowBgColor td {
  background-color: #b0daee !important;
}
</style>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jiojio冲冲冲

能帮助你是我最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值