vue3插槽:el-table表头插入tooltip及更换表格背景色方式

<script setup>
import { reactive } from "vue";
const state = reactive({
  tableData: [
    {
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1517 弄",
    },
    {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1519 弄",
    },
  ],
});
const addColor = ({ rowIndex, columnIndex }) => {
  if (columnIndex === 0) {
    if (rowIndex === 0) {
      return "orange";
    }
    if (rowIndex === 1) {
      return "yellow";
    }
    if (rowIndex === 2) {
      return "blue";
    }
  }
};
</script>

<template>
  <el-table
    :data="state.tableData"
    :cell-class-name="addColor"
    style="width: 640px; margin: auto"
  >
    <el-table-column
      label="#"
      type="index"
      align="center"
      width="60"
    ></el-table-column>
    <el-table-column prop="date">
      <template v-slot:header>
        <el-tooltip content="我是一个日期" placement="top-start" effect="light">
          <i class="el-icon-warning-outline"></i>
        </el-tooltip>
        <span>日期</span>
      </template>
    </el-table-column>
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="地址" prop="address" width="220"> </el-table-column>
    <el-table-column label="操作" width="160">
      <template v-slot="scope">
        <el-button type="text" size="small">查看</el-button>
        <el-button type="text" size="small">删除</el-button>
        <el-button type="text" size="small">{{ scope.row.date }}</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped>
span {
  float: left;
  font-size: 14px;
  font-weight: bold;
  margin-right: 3px;
}
:deep(.orange) {
  padding: 0 8px !important;
  .cell {
    div {
      background: #ff7f31;
      color: #fff;
    }
  }
}
:deep(.yellow) {
  padding: 0 8px !important;
  .cell {
    div {
      background: #ffba32;
      color: #fff;
    }
  }
}
:deep(.blue) {
  padding: 0 8px !important;
  .cell {
    div {
      background: #3288ff;
      color: #fff;
    }
  }
}
</style>

  <el-table
    :data="mrMessTableDatas"
    :row-style="rowStyleDisplay">
<el-table-column prop="soCode" fixed width="200" label="大副收据" sortable>
      <template #default="scope">
        <div
          :class="scope.row.selectChecked == true ? 'selectCheckedHover' : ''"
        >
          <el-popover
            placement="top-start"
            :width="150"
            trigger="hover"
            :content="scope.row.soCode"
            effect="dark"
          >
            <template #reference>
              <span class="inputnum-style">{{ scope.row.soCode }}</span>
            </template>
          </el-popover>
        </div>
      </template>
    </el-table-column>
</el-table>

const rowStyleDisplay = ({
  row,
  rowIndex,
}: {
  row: mrMessTable;
  rowIndex: number;
}) => {
  const checkIdList = multipleSelection.value.map((item: any) => item.id);
  if (checkIdList.includes(row.id)) {
    row.selectChecked = true;
    return {
      "background-color": "#d9ecff",
    };
  } else {
    row.selectChecked = false;
  }
};

:deep(.el-table__body tr:hover > td) {
  background-color: #3dc7ab !important;
  .selectCheckedHover {
    background-color: #3dc7ab !important;
    height: 45px;
    width: 200px;
    padding-top: 11px;
  }
}
:deep(.el-checkbox) {
  --el-checkbox-bg-color: #cfefa0b0;
}
.selectCheckedHover {
  background-color: #d9ecff;
  height: 45px;
  width: 200px;
  padding-top: 11px;
}