关于element plus 插件 e-table的用法

下载依赖包

npm install element-plus --save
或者
yarn add element-plus

全局引入 element plus

import ElementPlus from ‘element-plus’
import ‘element-plus/dist/index.css’
const app = createApp(App)
app.use(ElementPlus)
app.mount(‘#app’)

在需要用到的页面或者组件里面写入

<template>
  <el-table :data="tableData" stripe style="width: 100%">
    <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>

带斑马纹表格为例

其中的每一项的解释是

data 是 table 数据 / 数组形式的数据
每一行的数据 是数组 每一个元素的 prop 就是每个元素对应的key 值
label 是表头 每一列的头部内容
width是每一列的宽度

 <el-table-column sortable fixed="left" prop="room_id" label="id" width="180" align="center" />

align="center" 文字的对齐方式
sortable 如果你希望当前列的内容参加排序时可添加
fixed="left"此列固定在表格的左边

如果我们需要在表格中插入图片 就需要用到插槽了

  <el-table-column label="图片" width="180">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <el-image :src="scope.row.room_src" min-width="70" height="70" />
          </div>
        </template>
      </el-table-column>

#default="scope" 当前作用域
style="display: flex; align-items: center" 设置图片的排列方式
<el-image :src="scope.row.room_src" min-width="70" height="70" />插入的图片信息
scope.row.room_src当前作用域表格图像资源的路径
min-width最小宽度
height高度

如果我们需要对当前行操作的时候就可以单独添加一个列 用来删除选中操作

 <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>

$index当前行的索引 相对于整个数据的长度 length属性
row 数据的每一项

##如果我们要进行选中操作

  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column label="Date" width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column property="name" label="Name" width="120" />
    <el-table-column property="address" label="Address" show-overflow-tooltip />
  </el-table>
  <div style="margin-top: 20px">
    <el-button @click="toggleSelection([tableData[1], tableData[2]])"
      >Toggle selection status of second and third rows</el-button
    >
    <el-button @click="toggleSelection()">Clear selection</el-button>
  </div>

selection-change 当选择项发生变化时会触发该事件
type="selection 表格该列的作用 多选
ref=multipleTableRef用来全选与全消
show-overflow-tooltip 默认情况下，如果单元格内容过长，会占用多行显示 需要单行显示可以使用 show-overflow-tooltip 属性，它接受一个 Boolean， 为 true 时多余的内容会在 hover 时以 tooltip 的形式显示出来。
toggleSelection当前行的value值 支持参数 (当前行的信息和内容)

参考网址: https://element-plus.gitee.io/zh-CN/component/table.html#