关于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#

最后编辑于：2022.08.21 20:09:29