Die Tabellentabelle des Elements wird ausgewählt und die Hintergrundfarbe hinzugefügt

Fügen Sie hier eine Bildbeschreibung ein

 <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>

Supongo que te gusta

Origin blog.csdn.net/weixin_42268006/article/details/124554840
Recomendado
Clasificación