vue3——slot: ツールチップを el-table ヘッダーに挿入し、テーブルの背景色を変更します

vue3 では、vue2 で使用されていた slot="xxx" が v-slot:xxx または #xxx に変更され、slot-scope="xxx" が v-slot="xxx" に変更されたため、element-ui でスロット-scope="scope" used can write as v-slot="scope" or #default="scope". scope パラメーターを使用する必要がない場合は、#default="scope" と記述しても問題ありません。 header", slot= "footer" は #header, #footer と記述できます。ツールチップにヘッダーを挿入するには、スロット メソッドを使用します。

テーブルの背景色を変更するには、セル className のコールバック メソッドである el-table の cell-class-name パラメータを使用する必要があります. 行と列を自由に選択し、特別な色のクラスを追加することができます.行または列のスタイル。

 効果：

コード：

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