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

更新時間：2023年06月08日 09:58:25 作者：acheding

這篇文章主要介紹了vue3插槽:el-table表頭插入tooltip及更換表格背景色方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue3插槽:el-table表頭插入tooltip及更換表格背景色

vue3中，以前 vue2 使用的 slot="xxx" 改成了 v-slot:xxx 或 #xxx ，slot-scope="xxx" 改成了 v-slot="xxx" 的形式，所以在 element-ui 中使用的 slot-scope="scope" 可以寫為 v-slot="scope" 或者 #default="scope"，如果不需要使用 scope 參數(shù)的話，寫成 #default 也沒問題，slot="header"、slot="footer" 可以寫為 #header、#footer。表頭插入 tooltip 就用到了插槽的方法。

更換表格背景色需要用到 el-table 的 cell-class-name 參數(shù)，它是單元格 className 的回調(diào)方法，可以自由選擇行和列，為某一行或列添加一個帶有特殊樣式的 class 類。

效果：

代碼：

<script setup>
import { reactive } from "vue";
const state = reactive({
  tableData: [
    {
      date: "2016-05-01",
      name: "王小虎",
      address: "上海市普陀區(qū)金沙江路 1517 弄",
    },
    {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀區(qū)金沙江路 1518 弄",
    },
    {
      date: "2016-05-03",
      name: "王小虎",
      address: "上海市普陀區(qū)金沙江路 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>

vue3 Element-Plus El-Table Fixed列修改背景色問題

需求

帶有checkbox的el-table，選中行變色，鼠標經(jīng)過的行變色

阻礙

fixed列不是以單元格為單位是以列為單位

解決方法

大概思路是在fixed列單元格中加一個div 頂滿顯示,然后這個div是否發(fā)揮作用的依據(jù)是選中checkbox會把該行的一個flag更新，通過判斷這個flag是否使div發(fā)揮作用，hover也是一樣把fixed列單元格內(nèi)的

div在hover的css中寫一份鼠標經(jīng)過hover發(fā)揮作用相關hover內(nèi)的css也發(fā)揮作用

剛開始寫，條理不是很清晰，請見諒！

以下是相關代碼：

html：

? <el-table
? ? :data="mrMessTableDatas"
? ? :row-style="rowStyleDisplay">
<el-table-column prop="soCode" fixed width="200" label="大副收據(jù)" 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>

js：

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;
? }
};

css：

: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;
}