element-plus表格组件el-table 的使用

表格是在前端页面中是经常被用到的，尤其是管理系统，几乎每个页面都会存在表格，所以掌握表格组件是非常有必要的。element-plus提供el-table，el-table-column来渲染表格，

1. el-table

组件主要属性

组件主要事件

1. el-table-column (表格列组件)

组件主要属性

组件插槽

3.用法例子

<script setup lang="ts">
import { aG } from 'vitest/dist/reporters-LqC_WI4d.js';
import { onMounted, reactive, ref, watch } from 'vue'
const pageSizes = ref([10, 20, 50, 100]);

const currentPageSize = ref(10)
const currentPage = ref(1)


class Student {
  id: number
  name: string
  age: number
  address: string
  children: Student[]
  hasChildren: boolean

  constructor(id: number, name: string, age: number, address: string) {
    this.id = id
    this.name = name
    this.age = age
    this.address = address
    this.children = []
    this.hasChildren = false
  }
}


watch(currentPage, (newPage, oldPage) => {
  console.log(newPage, oldPage)
})


const tableData = ref([
  new Student(1, "zhangsanxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", 30, "beijing"),
  new Student(2, "lisi1", 30, "shanghai"),
  new Student(3, "lisi2", 30, "shanghai"),
  new Student(4, "lisi3", 30, "shanghai"),
  new Student(5, "lisi4", 30, "shanghai"),
  new Student(6, "lisi5", 30, "shanghai"),
  new Student(7, "lisi6", 30, "shanghai"),
  new Student(8, "lisi7", 30, "shanghai"),
  new Student(9, "lisi8", 30, "shanghai"),
  {
    id: 10, name: "lisi8", age: 30, address: "shanghai",
    hasChildren: true,
    children: [
      {
        id: 91, name: "wangwu1", age: 30, address: "shenzhen"
      },
      {
        id: 92, name: "wangwu12", age: 30, address: "shenzhen"
      }
    ]
  },
])


const load = (
  row: Student,
  treeNode: unknown,
  resolve: (date: Student[]) => void
) => {
  setTimeout(() => {
    resolve([
      {
        id: 91, name: "wangwu1", age: 30, address: "shenzhen", hasChildren: false, children: []
      },
      {
        id: 92, name: "wangwu12", age: 30, address: "shenzhen", hasChildren: false, children: []
      },
    ])
  }, 1000)
}

const currentRow = ref()

const rowChange = (s: Student) => {
  console.log(s)
  
    //currentRow.value = s
  }


const sortChange = (cloumn: any, prop: string, order: string) => {
  console.log(cloumn, prop, order)
}


const selectChange=(selectionsS:Student[],row:Student)=>{
  console.log(selectionsS,row)
}

const toDo=(scope:any)=>{ 
  console.log(scope.id)
}


</script>


<template>

  <div>
    <el-container>
      <el-header></el-header>
      <el-main>
        <el-table :data="tableData" lazy :load="load" row-key="id" @select="selectChange"
          :tree-props="{ hasChildren: 'hasChildren', children: 'children' }" border stripe height="250" style="width:100%"
          highlight-current-row @sort-change="sortChange" @current-change="rowChange">
          <el-table-column label="id" sortable fixed prop="id" width="100"></el-table-column>
          <el-table-column label="name" sortable="custom" prop="name" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="age" prop="age">
          </el-table-column>
          <el-table-column label="address" prop="address">
          </el-table-column>
          <el-table-column fixed="right" label="Operations" min-width="120">
      <template #default="scope">
        <el-button
          link
          type="primary"
          size="small"
          @click.prevent="toDo(scope.row)"
        >
          Remove
        </el-button>
      </template>
    </el-table-column>
        </el-table>
      </el-main>
      <el-footer></el-footer>

    </el-container>


    <el-container>
      <el-header></el-header>
      <el-main>
        <el-table :data="tableData" border stripe height="250" style="width:100%" highlight-current-row @select="selectChange"
          @sort-change="sortChange" @current-change="rowChange">
          <el-table-column type="selection" width="100"></el-table-column>
          <el-table-column label="id" sortable fixed prop="id" width="100"></el-table-column>
          <el-table-column label="name" sortable="custom" prop="name" width="100" show-overflow-tooltip>
          </el-table-column>
          <el-table-column label="age" prop="age">
          </el-table-column>
          <el-table-column label="address" prop="address">
          </el-table-column>
          <el-table-column fixed="right" label="Operations" min-width="120">
            <template #default="scope">
              <el-button type="primary" @click.prevent="toDo(scope.row)">修改</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
      <el-footer></el-footer>

    </el-container>


    <el-pagination :page-sizes="pageSizes" v-model:page-size="currentPageSize" v-model:current-page="currentPage"
      layout="sizes,prev,next,jumper,pager,>" :total="200"></el-pagination>
  </div>



</template>

<style scoped></style>

https://element-plus.org/zh-CN/component/table.html#%E8%A1%A8%E6%A0%BC%E5%B8%83%E5%B1%80