对element-plus的理解

1.返回行样式类型或拿到行数据：row-class-name

这是一个拿到表格每一行的回调行数：在 el-table 中，row-class-name 属性用于为表格的每一行添加自定义样式类。它接受一个方法作为参数，该方法根据表格行的数据和行索引返回一个类名。

官方写法：

<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

<script lang="ts" setup>
interface User {
  date: string
  name: string
  address: string
}
//这里拿到的row是行的数据
//rowindex是行的索引
//row类型为User返回
//rowindex类型为number
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>

或者可以直接返回你的类名： 

<script setup lang="ts">
const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'DD',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]
const tableRowClassName  = ({row, rowIndex}:{row:any;rowIndex:number}) =>{    
    if(row.name==='DD'){
        return 'DD'
    }
    return ''
}
</script>

<template>
    <div style="width:1000px">
        <el-table :data="tableData" style="width: 100%" :row-class-name="tableRowClassName ">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </div>
</template>
<style>
//这里一定要.el-table再加类名，不然拿不到css
.el-table .DD{
    background: red;
}
</style>

2.固定表头(height:250) 

<div style="width:1000px">
        <el-table :data="tableData" height="250" style="width: 100%" :row-class-name="tableRowClassName ">
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column prop="name" label="Name" width="180" />
            <el-table-column prop="address" label="Address" />
        </el-table>
    </div>

3.固定列

fixed="right"

4.当行被点击时触发（current-change）

<el-table :data="tableData" height="250" style="width: 100%" :row-class-name="tableRowClassName" @current-change="handleCurrentChange">
            <el-table-column type="index" width="50" />
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column label="1">
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table-column>
        </el-table>


const handleCurrentChange = (val: User | undefined)=>{
    // 拿到表格行的数据
    console.log(val);
    
}

5.高亮显示当前行

highlight-current-row

6.当设置了selection，点击触发

<el-table :data="tableData" height="250" style="width: 100%" 
            :row-class-name="tableRowClassName" @current-change="handleCurrentChange"
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="50" />
            <el-table-column prop="date" label="Date" width="180" />
            <el-table-column label="1">
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table-column>
        </el-table>

const handleSelectionChange = (val: User[])=>{
    console.log(val);
}

 7.自定义表头

<el-table-column align="right">
      <template #header>
        <el-input v-model="search" size="small" placeholder="Type to search" />
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.$index, scope.row)"
          >Edit</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)"
          >Delete</el-button
        >
      </template>
    </el-table-column>

8.表头样式设计：

http://t.csdnimg.cn/sTYO3 

http://t.csdnimg.cn/YwBx4