首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3 el-table表头插入tooltip及更换表格背景色

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 参数的话，写成 #default 也没问题，slot="header"、slot="footer" 可以写为 #header、#footer。表头插入 tooltip 就用到了插槽的方法。

更换表格背景色需要用到 el-table 的 cell-class-name 参数，它是单元格 className 的回调方法，可以自由选择行和列，为某一行或列添加一个带有特殊样式的 class 类。

效果：

代码：

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

vue3 Element-Plus El-Table Fixed列修改背景色问题

需求

带有checkbox的el-table，选中行变色，鼠标经过的行变色

阻碍

fixed列不是以单元格为单位是以列为单位

解决方法

大概思路是在fixed列单元格中加一个div 顶满显示,然后这个div是否发挥作用的依据是选中checkbox会把该行的一个flag更新，通过判断这个flag是否使div发挥作用，hover也是一样把fixed列单元格内的

div在hover的css中写一份鼠标经过hover发挥作用相关hover内的css也发挥作用

刚开始写，条理不是很清晰，请见谅！

以下是相关代码：

html：

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

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

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

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