Virtualized Table 虚拟化表格--Element-plus

<script lang="ts" setup>
  import { ref,h } from 'vue'
  import {Search} from '@element-plus/icons-vue'
  const input=ref('')
  function generateRandomId(length) {  
    let result = '';  
    const characters = 'ABCDEFGHIJKLM11dsWXYZ0123456789';  
    const charactersLength = characters.length;  
    for (let i = 0; i < length; i++) {  
        result += characters.charAt(Math.floor(Math.random() * charactersLength));  
    }  
    return result;  
}  
    const columns = [
  {
    key: "id",
    dataKey: "id",//需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填id
    title: "预约id",//显示在单元格表头的文本
    width: 50,//当前列的宽度，必须设置
    fixed: true,//是否固定列
    class:"id_style", //添加列自定义样式
    headerClass:"id_style" //添列header列自定义样式
    
  },
  {
    key: "order_id",
    dataKey: "order_id",
    title: "预约编号",

    width: 100,
    align: "center",
  },
  {
    key: "name",
    dataKey: "name",//需要渲染当前列的数据字段，如{id:9527,name:'Mike'}，则填name
    title: "用户姓名",
    width: 100,
    fixed: true,
  },
  {
    key: "id_number",
    dataKey: "id_number",
    title: "联系方式",
    width: 180,
  },
  {
    key: "department",
    dataKey: "department",
    title: "账户",
    minWidth: 100,
    width: 100,
  },
  {
    key: "create_time",
    dataKey: "create_time",
    title: "预约时间",
    width: 100,
  },
  {
    key: "end_time",
    dataKey: "end_time",
    title: "结束时间",
    width: 100,
  },
  {
    key: "release_status",
    dataKey: "release_status",
    title: "发放状态",
    width: 100,
    cellRenderer: ({ cellData }) =>
      h(
        ElTag,//这里不能写成字符串'ElTag'，如果是普通的html标签如'div'，则可以。
        { type: cellData == "可发放" ? "success" : "danger",
         },
        { default: () => cellData }//也可以写成字符串如'这是标签内容'，但控制台会有警告
      )
  },
  
  {
    key: "resource",
    dataKey: "resource",
    title: "自习室名称",
    width: 90,
    align: "center",
    
  },

  {
    key: "tip",
    dataKey: "tip",
    title: "备注信息",
    width: 100,
    align: "center",
  },
  {
    key: "operation",
    title: "操作",
    width: 100,
    align: "center",
    cellRenderer: ({ cellData }) =>
      h(
        ElButton,//这里不能写成字符串'ElTag'，如果是普通的html标签如'div'，则可以。
        { type: "primary", size: "small" ,
        onClick:()=>{
            ElMessage.success("编辑成功"+cellData,)
          } 
        },
        { default: () => "编辑" },
      ),
      
  },
];



const numObjects = 15; // 假设我们想生成15个对象  
const data = Array.from({ length: numObjects }, (_, index) => ({  
  id: (index + 1).toString(),  
  name: "Mike",  
  order_id: generateRandomId(10),  
  id_number: "123456789",  
  department: "IT",  
  create_time: "2023-05-01",  
  end_time: "2023-05-02",  
  release_status: "已发放",  
  resource: `自习室${index + 1}`,  
  tip: "无"  
}));  
  
  const kls = ref<string>('')
  </script>

<template>
     <div class="search" style="margin-bottom: 15px;">
    <el-input
    v-model="input"
    style="width: 240px"
    placeholder="请输入要搜索的预约id"
    clearable

  />
  <el-button :icon="Search" circle class="btn" @click="handleClick()"/>
 </div>
    <div style="height: 600px">
      <el-auto-resizer>
        <template #default="{ height, width }">
          <el-table-v2
          :cache="5"
            :columns="columns"
            :cell-props="cellProps"
             :row-class="tableRowClassName"
            :class="kls"
            :data="data"
            :width="width"
            :height="height"
          />
        </template>
      </el-auto-resizer>
    </div>
  </template>
  
  
  
  <style>
  .hovering-col-0 [data-key='hovering-col-0'],
  .hovering-col-1 [data-key='hovering-col-1'],
  .hovering-col-2 [data-key='hovering-col-2'],
  .hovering-col-3 [data-key='hovering-col-3'],
  .hovering-col-4 [data-key='hovering-col-4'],
  .hovering-col-5 [data-key='hovering-col-5'],
  .hovering-col-6 [data-key='hovering-col-6'],
  .hovering-col-7 [data-key='hovering-col-7'],
  .hovering-col-8 [data-key='hovering-col-8'],
  .hovering-col-9 [data-key='hovering-col-9'],
  .hovering-col-10 [data-key='hovering-col-10'] {
    background: var(--el-table-row-hover-bg-color);
  }
  
  [data-key='hovering-col-0'] {
    font-weight: bold;
    user-select: none;
    pointer-events: none;
  }
  .id_style{
    background-color: rgb(241, 240, 238);
  }
  </style>