element-ui表格Table详解

这篇具有很好参考价值的文章主要介绍了element-ui表格Table详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

先给大家展示一下效果

element-ui表格Table详解

Table 属性 

属性名 说明 类型 可选值 默认值
data 显示的数据 array
height Table 的高度, 默认为自动高度。 如果 height 为 number 类型,单位 px;如果 height 为 string 类型,则这个高度会设置为 Table 的 style.height 的值,Table 的高度会受控于外部样式。 string / number
max-height Table 的最大高度。 合法的值为数字或者单位为 px 的高度。 string / number
stripe 是否为斑马纹 table boolean false
border 是否带有纵向边框 boolean false
size Table 的尺寸 string large / default /small
fit 列的宽度是否自撑开 boolean true
show-header 是否显示表头 boolean true
highlight-current-row 是否要高亮当前行 boolean false
current-row-key 当前行的 key,只写属性 string / number
row-class-name 行的 className 的回调方法,也可以使用字符串为所有行设置一个固定的 className。 function({ row, rowIndex }) / string
row-style 行的 style 的回调方法,也可以使用一个固定的 Object 为所有行设置一样的 Style。 function({ row, rowIndex }) / object
cell-class-name 单元格的 className 的回调方法,也可以使用字符串为所有单元格设置一个固定的 className。 function({ row, column, rowIndex, columnIndex }) / string
cell-style 单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有单元格设置一样的 Style。 function({ row, column, rowIndex, columnIndex }) / object
header-row-class-name 表头行的 className 的回调方法,也可以使用字符串为所有表头行设置一个固定的 className。 function({ row, rowIndex }) / string
header-row-style 表头行的 style 的回调方法,也可以使用一个固定的 Object 为所有表头行设置一样的 Style。 function({ row, rowIndex }) / object
header-cell-class-name 表头单元格的 className 的回调方法,也可以使用字符串为所有表头单元格设置一个固定的 className。 function({ row, column, rowIndex, columnIndex }) / string
header-cell-style 表头单元格的 style 的回调方法,也可以使用一个固定的 Object 为所有表头单元格设置一样的 Style。 function({ row, column, rowIndex, columnIndex }) / object
row-key 行数据的 Key,用来优化 Table 的渲染; 在使用reserve-selection功能与显示树形数据时,该属性是必填的。 类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function function(row) / string
empty-text 空数据时显示的文本内容, 也可以通过 #empty 设置 string No Data
default-expand-all 是否默认展开所有行,当 Table 包含展开行存在或者为树形表格时有效 boolean false
expand-row-keys 可以通过该属性设置 Table 目前的展开行,需要设置 row-key 属性才能使用,该属性为展开行的 keys 数组。 array
default-sort 默认的排序列的 prop 和顺序。 它的 prop 属性指定默认的排序的列,order 指定默认排序的顺序 object (order: 'ascending' 'descending') 如果只指定了 prop, 没有指定 order, 则默认顺序是 ascending
tooltip-effect 溢出的 tooltip 的 effect string dark / light dark
tooltip-options 2.2.28 溢出 tooltip 的选项,参见下述 tooltip 组件 object 请参考 tooltip object
show-summary 是否在表尾显示合计行 boolean false
sum-text 显示摘要行第一列的文本 string Sum
summary-method 自定义的合计计算方法 function({ columns, data })
span-method 合并行或列的计算方法 function({ row, column, rowIndex, columnIndex })
select-on-indeterminate 在多选表格中,当仅有部分行被选中时,点击表头的多选框时的行为。 若为 true,则选中所有行;若为 false,则取消选择所有行 boolean true
indent 展示树形数据时,树节点的缩进 number 16
lazy 是否懒加载子节点数据 boolean
load 加载子节点数据的函数,lazy 为 true 时生效 function(row, treeNode, resolve)
tree-props 渲染嵌套数据的配置选项 object { hasChildren: 'hasChildren', children: 'children' }
table-layout 设置表格单元、行和列的布局方式 string fixed / auto fixed
scrollbar-always-on 总是显示滚动条 boolean false
flexible 2.2.1 确保主轴的最小尺寸 boolean false

Table 事件 

事件名 说明 回调参数
select 当用户手动勾选数据行的 Checkbox 时触发的事件 selection, row
select-all 当用户手动勾选全选 Checkbox 时触发的事件 selection
selection-change 当选择项发生变化时会触发该事件 selection
cell-mouse-enter 当单元格 hover 进入时会触发该事件 row, column, cell, event
cell-mouse-leave 当单元格 hover 退出时会触发该事件 row, column, cell, event
cell-click 当某个单元格被点击时会触发该事件 row, column, cell, event
cell-dblclick 当某个单元格被双击击时会触发该事件 row, column, cell, event
cell-contextmenu 当某个单元格被鼠标右键点击时会触发该事件 row, column, cell, event
row-click 当某一行被点击时会触发该事件 row, column, event
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event
row-dblclick 当某一行被双击时会触发该事件 row, column, event
header-click 当某一列的表头被点击时会触发该事件 column, event
header-contextmenu 当某一列的表头被鼠标右键点击时触发该事件 column, event
sort-change 当表格的排序条件发生变化的时候会触发该事件 { column, prop, order }
filter-change column 的 key, 如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件 filters
current-change 当表格的当前行发生变化的时候会触发该事件,如果要高亮当前行,请打开表格的 highlight-current-row 属性 currentRow, oldCurrentRow
header-dragend 当拖动表头改变了列的宽度的时候会触发该事件 newWidth, oldWidth, column, event
expand-change 当用户对某一行展开或者关闭的时候会触发该事件(展开行时,回调的第二个参数为 expandedRows;树形表格时第二参数为 expanded) row, (expandedRows | expanded)

Table 方法 

方法名 说明 参数
clearSelection 用于多选表格,清空用户的选择
getSelectionRows 返回当前选中的行
toggleRowSelection 用于多选表格,切换某一行的选中状态, 如果使用了第二个参数,则可直接设置这一行选中与否 row, selected
toggleAllSelection 用于多选表格,切换全选和全不选
toggleRowExpansion 用于可扩展的表格或树表格,如果某行被扩展,则切换。 使用第二个参数,您可以直接设置该行应该被扩展或折叠。 row, expanded
setCurrentRow 用于单选表格,设定某一行为选中行, 如果调用时不加参数,则会取消目前高亮行的选中状态。 row
clearSort 用于清空排序条件,数据会恢复成未排序的状态
clearFilter 传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数,清除所有过滤器 columnKeys
doLayout 对 Table 进行重新布局。 当表格可见性变化时,您可能需要调用此方法以获得正确的布局
sort 手动排序表格。 参数 prop 属性指定排序列,order 指定排序顺序。 prop: string, order: string
scrollTo 滚动到一组特定坐标 (options: ScrollToOptions | number, yCoord?: number)
setScrollTop 设置垂直滚动位置 top
setScrollLeft 设置水平滚动位置 left

Table 插槽 

插槽名 说明 子标签
- 自定义默认内容 Table-column
append 插入至表格最后一行之后的内容, 如果需要对表格的内容进行无限滚动操作,可能需要用到这个 slot。 若表格有合计行,该 slot 会位于合计行之上。
empty 当数据为空时自定义的内容

Table-column 属性 

属性名 说明 类型 可选值 默认值
type 对应列的类型。 如果设置了selection则显示多选框; 如果设置了 index 则显示该行的索引(从 1 开始计算); 如果设置了 expand 则显示为一个可展开的按钮 string selection / index / expand
index 如果设置了 type=index,可以通过传递 index 属性来自定义索引 number / function(index)
label 显示的标题 string
column-key column 的 key, column 的 key, 如果需要使用 filter-change 事件,则需要此属性标识是哪个 column 的筛选条件 string
prop 字段名称 对应列内容的字段名, 也可以使用 property属性 string
width 对应列的宽度 string / number
min-width 对应列的最小宽度, 对应列的最小宽度, 与 width 的区别是 width 是固定的,min-width 会把剩余宽度按比例分配给设置了 min-width 的列 string / number
fixed 列是否固定在左侧或者右侧。 true 表示固定在左侧 string / boolean true / 'left' / 'right'
render-header 列标题 Label 区域渲染使用的 Function function({ column, $index })
sortable 对应列是否可以排序, 如果设置为 'custom',则代表用户希望远程排序,需要监听 Table 的 sort-change 事件 boolean / string custom false
sort-method 指定数据按照哪个属性进行排序,仅当sortable设置为true的时候有效。 应该如同 Array.sort 那样返回一个 Number function(a, b)
sort-by 指定数据按照哪个属性进行排序,仅当 sortable 设置为 true 且没有设置 sort-method 的时候有效。 如果 sort-by 为数组,则先按照第 1 个属性排序,如果第 1 个相等,再按照第 2 个排序,以此类推 function(row, index) / string / array
sort-orders 数据在排序时所使用排序策略的轮转顺序,仅当 sortable 为 true 时有效。 需传入一个数组,随着用户点击表头,该列依次按照数组中元素的顺序进行排序 array 数组中的元素需为以下三者之一:ascending 表示升序,descending 表示降序,null 表示还原为原始顺序 ['ascending', 'descending', null]
resizable 对应列是否可以通过拖动改变宽度(需要在 el-table 上设置 border 属性为真) boolean true
formatter 用来格式化内容 function(row, column, cellValue, index)
show-overflow-tooltip 当内容过长被隐藏时显示 tooltip boolean \ object 2.2.28 参考表格的 tooltip-options
align 对齐方式 string left / center / right left
header-align 表头对齐方式, 若不设置该项,则使用表格的对齐方式 string left / center / right
class-name 列的 className string
label-class-name 当前列标题的自定义类名 string
selectable 仅对 type=selection 的列有效,类型为 Function,Function 的返回值用来决定这一行的 CheckBox 是否可以勾选 function(row, index)
reserve-selection 数据刷新后是否保留选项,仅对 type=selection 的列有效, 请注意, 需指定 row-key 来让这个功能生效。 boolean false
filters 数据过滤的选项, 数组格式,数组中的元素需要有 text 和 value 属性。 数组中的每个元素都需要有 text 和 value 属性。 Array<{text: string, value: string}>
filter-placement 过滤弹出框的定位 string 与 Tooltip 的 placement 属性相同
filter-multiple 数据过滤的选项是否多选 boolean true
filter-method 数据过滤使用的方法, 如果是多选的筛选项,对每一条数据会执行多次,任意一次返回 true 就会显示。 function(value, row, column)
filtered-value 选中的数据过滤项,如果需要自定义表头过滤的渲染方式,可能会需要此属性。 array

Table-column 插槽 

插槽名 说明
自定义列的内容 作用域参数为 { row, column, $index }
header 自定义表头的内容, 作用域参数为 { column, $index }

表格部分代码

  <!--表格数据展示 start-->
      <el-table :data="dataList.list" style="width:1300px;">
        <el-table-column prop="bookImg" label="图片" width="150" align="center">
          <template #default="scope">
            <img :src="scope.row.bookImg" style="height:60px"/>
          </template>
        </el-table-column>
        <el-table-column  prop="bookTypeId" label="类型" width="100px">
          <template #default="scope">
                <span v-for="item in typeList.list" :key="item.bookTypeId">
                    {{ scope.row.bookTypeId == item.bookTypeId ? item.bookTypeName : '' }}
                </span>
          </template>
        </el-table-column>
        <el-table-column  prop="bookName" label="名称" width="100" align="center">
          <template #default="scope">
            <div style="color: #6ca7ef;" v-html="scope.row.bookName"></div>
          </template>
        </el-table-column>
        <el-table-column prop="bookPrice" label="价格" width="100" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bookWriter" label="作者" width="60" align="center">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="bookPublishHouse" label="出版社" width="80" align="center">
        </el-table-column>
        <el-table-column prop="bookPublishTime" label="出版时间" width="100" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bookISBN" label="ISBN号" width="100"
                         align="center"></el-table-column>
        <el-table-column prop="bookStock" label="库存" width="100" align="center"></el-table-column>
        <el-table-column prop="bookSalvesVolume" label="销量" width="100" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bookCatalog" label="目录" width="60" align="center">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="bookDesc" label="简介" width="60" align="center">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button round size="small" type="primary"
                       @click="handleEdit(scope.$index, scope.row)">修改
            </el-button>
            <el-button round size="small" type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--表格数据展示 end-->

全部代码 文章来源地址https://www.toymoban.com/news/detail-467252.html

<template>
  <div class="data-container">
    <!--添加 start-->
    <div class="data-header">
      <!--优化:@keyup.enter="searchHandle"回车时触发searchHandle事件-->
      <el-input class="input" @keyup.enter="searchHandle" v-model="searchInfo" size="large"
                placeholder="请输入名称/作者/出版社"></el-input>
      <el-button @click="searchHandle" class="button" size="large" type="primary" plain>搜索</el-button>
      <el-button @click="addHander" style="margin-left: 40px;" size="large" class="button" type="primary">
        <el-icon>
          <DocumentAdd/>
        </el-icon>&nbsp;添加
      </el-button>
    </div>
    <!--添加 end-->
    <div class="data-table">
      <!--表格数据展示 start-->
      <el-table :data="dataList.list" style="width:1300px;">
        <el-table-column prop="bookImg" label="图片" width="150" align="center">
          <template #default="scope">
            <img :src="scope.row.bookImg" style="height:60px"/>
          </template>
        </el-table-column>
        <el-table-column  prop="bookTypeId" label="类型" width="100px">
          <template #default="scope">
                <span v-for="item in typeList.list" :key="item.bookTypeId">
                    {{ scope.row.bookTypeId == item.bookTypeId ? item.bookTypeName : '' }}
                </span>
          </template>
        </el-table-column>
        <el-table-column  prop="bookName" label="名称" width="100" align="center">
          <template #default="scope">
            <div style="color: #6ca7ef;" v-html="scope.row.bookName"></div>
          </template>
        </el-table-column>
        <el-table-column prop="bookPrice" label="价格" width="100" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bookWriter" label="作者" width="60" align="center">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="bookPublishHouse" label="出版社" width="80" align="center">
        </el-table-column>
        <el-table-column prop="bookPublishTime" label="出版时间" width="100" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bookISBN" label="ISBN号" width="100"
                         align="center"></el-table-column>
        <el-table-column prop="bookStock" label="库存" width="100" align="center"></el-table-column>
        <el-table-column prop="bookSalvesVolume" label="销量" width="100" align="center"></el-table-column>
        <el-table-column show-overflow-tooltip prop="bookCatalog" label="目录" width="60" align="center">
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="bookDesc" label="简介" width="60" align="center">
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template #default="scope">
            <el-button round size="small" type="primary"
                       @click="handleEdit(scope.$index, scope.row)">修改
            </el-button>
            <el-button round size="small" type="danger"
                       @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--表格数据展示 end-->
      <!--分页 start-->
      <div class="page">
        <el-pagination @current-change="currentChangeHaddler" background layout="prev,pager,next,jumper"
                       default-page-size="defaultPageSize" :total="totalData"></el-pagination>
      </div>
      <!--分页 end-->
      <!--添加对话框 start-->
      <el-dialog draggable destroy-on-close v-model="dialogAddVisible" title="添加" width="70%" center>
        <el-form :inline="true" :model="addFormInfo" status-icon label-width="120px">
          <el-form-item label="图片">
            <el-upload list-type="picture-card" action="http://localhost:8040/file/localhost/upload"
                       :on-success="onUploadAddSuccess" :on-remove="handleAddRemove">
              <el-icon>
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="addFormInfo.bookTypeId" class="m-2" placeholder="请选择书籍类型" size="large">
              <el-option v-for="item in typeList.list" :key="item.bookTypeId" :label="item.bookTypeName"
                         :value="item.bookTypeId"/>
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="addFormInfo.bookName"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="addFormInfo.bookPrice"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="addFormInfo.bookWriter"></el-input>
          </el-form-item>
          <el-form-item label="出版社">
            <el-input v-model="addFormInfo.bookPublishHouse"></el-input>
          </el-form-item>
          <el-form-item label="出版时间">
            <el-input v-model="addFormInfo.bookPublishTime"></el-input>
          </el-form-item>
          <el-form-item label="ISBN号">
            <el-input v-model="addFormInfo.bookISBN"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="addFormInfo.bookStock"></el-input>
          </el-form-item>
          <el-form-item label="销量">
            <el-input v-model="addFormInfo.bookSalvesVolume"></el-input>
          </el-form-item>
          <el-form-item label="目录">
            <el-input style="width: 800px" :rows="6" type="textarea" v-model="addFormInfo.bookCatalog"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input style="width: 800px" :rows="6" type="textarea" v-model="addFormInfo.bookDesc"></el-input>
          </el-form-item>

        </el-form>
        <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogAddVisible = false">取消</el-button>
                        <el-button type="primary" @click="sureHandler">确定</el-button>
                    </span>
        </template>
      </el-dialog>
      <!--添加对话框 end-->
      <!--编辑对话框 start-->
      <el-dialog draggable destroy-on-close v-model="dialogEditorVisible" title="修改" width="70%" center>
        <el-form :inline="true" :model="editorFormInfo" label-width="120px">
          <el-form-item label="图片">
            <el-upload list-type="picture-card" action="http://localhost:8040/file/localhost/upload"
                       :show-file-list="false"
                       :on-success="onUploadEditorSuccess">
              <img v-if="fileEditorPath" :src="fileEditorPath" class="avatar" style="height:60px"/>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="editorFormInfo.bookTypeId" class="m-2" placeholder="Select" size="large">
              <el-option v-for="item in typeList.list" :key="item.bookTypeId" :label="item.bookTypeName"
                         :value="item.bookTypeId"/>
            </el-select>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="editorFormInfo.bookName"></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="editorFormInfo.bookPrice"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="editorFormInfo.bookWriter"></el-input>
          </el-form-item>
          <el-form-item label="出版社">
            <el-input v-model="editorFormInfo.bookPublishHouse"></el-input>
          </el-form-item>
          <el-form-item label="出版时间">
            <el-input v-model="editorFormInfo.bookPublishTime"></el-input>
          </el-form-item>
          <el-form-item label="ISBN号">
            <el-input v-model="editorFormInfo.bookISBN"></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="editorFormInfo.bookStock"></el-input>
          </el-form-item>
          <el-form-item label="销量">
            <el-input v-model="editorFormInfo.bookSalvesVolume"></el-input>
          </el-form-item>
          <el-form-item label="目录">
            <el-input style="width: 800px" :rows="6" type="textarea" v-model="editorFormInfo.bookCatalog"></el-input>
          </el-form-item>
          <el-form-item label="简介">
            <el-input style="width: 800px" :rows="6" type="textarea" v-model="editorFormInfo.bookDesc"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogEditorVisible = false">取消</el-button>
                        <el-button type="primary" @click="sureEditorHandler">确定</el-button>
                    </span>
        </template>
      </el-dialog>
      <!--编辑对话框 end-->
    </div>
  </div>
</template>
<script setup>
import axios from "@/utils/request.js"
import {onMounted, reactive, ref} from "vue";
//初始化类型列表
const typeList = reactive({
  list: []
})
//数据列表
const dataList = reactive({
  list: []
})
//数据总条数
const totalData = ref(0)
//当前页
const currentPage = ref(1)
//初始化分页显示条数
const defaultPageSize = ref(5)
//搜索初始化状态
const searchInfo = ref("")
//添加-上传后图片地址
const fileAddPath = ref(0)
//编辑-上传后图片地址
const fileEditorPath = ref(0)
//添加添加对话框控制器
const dialogAddVisible = ref(false)
//初始化添加对话框状态
const addFormInfo = reactive({

  bookImg: "",
  bookName: "",
  bookPrice: "",
  bookWriter: "",
  bookPublishHouse: "",
  bookPublishTime: "",
  bookISBN: "",
  bookStock: "",
  bookSalvesVolume: "",

  bookCatalog: "",

  bookDesc: "",

  bookTypeId: "",

})
//编辑对话框控制器
const dialogEditorVisible = ref(false)
//初始化编辑对话框状态
const editorFormInfo = reactive({
  bookId: "",
  bookImg: "",
  bookName: "",
  bookPrice: "",
  bookWriter: "",
  bookPublishHouse: "",
  bookPublishTime: "",
  bookISBN: "",
  bookStock: "",
  bookSalvesVolume: "",

  bookCatalog: "",

  bookDesc: "",

  bookTypeId: "",

})
/**
 * 网路请求:分页查询
 *  */
const http = (search, page, size) => {
  axios.get('/book/book/search', {
    params: {
      search,
      page,
      size
    }
  }).then(res => {
    if (res.data.code == 200) {
      dataList.list = res.data.data.records
      totalData.value = res.data.data.total
    } else {
      ElMessage.error(res.data.message)
    }

  })
}
onMounted(() => {
  http(null, 1, 5)
  axios.get('/book/bookType/findAll').then(res => {
    typeList.list = res.data.data
    console.log(typeList.list[0])
  })
})
/**
 * 添加时文件上传成功时的钩子
 */
const onUploadAddSuccess = (response, uploadFile) => {
  console.log(response)//http://192.168.66.101/group1/M00/00/00/wKhCZWQZ2Y6AfdIDAADHg7AcneY285.jpg
  console.log(uploadFile.raw.name)//springboot.jpg
  fileAddPath.value = response.data
}
/**
 * 编辑时文件上传成功时的钩子
 */
const onUploadEditorSuccess = (response, uploadFile) => {
  //console.log(response.data)//http://192.168.66.101/group1/M00/00/00/wKhCZWQZ2Y6AfdIDAADHg7AcneY285.jpg
  //console.log(uploadFile.raw.name)//springboot.jpg
  fileEditorPath.value = response.data
}
/**
 * 添加时文件移除时的操作
 */
const handleAddRemove = (file, files) => {
  //console.log(file.url)//file.url---blob:http://127.0.0.1:81/87591d3e-43e3-4032-bd61-c26867d32f0e
  //console.log(fileAddPath.value)
  axios.post('/book/book/delete', {
    params: {
      filePath: fileAddPath.value
    }
  }).then(res => {
    if (res.data.code == 200) {
      fileAddPath.value = null
      ElMessage.success("上传时移除图片成功")
    }
  })
}
/**
 * 分页
 */
const currentChangeHaddler = (val) => {
  http(searchInfo.value, val, 5)
  currentPage.value = val
}
/**
 * 搜索按钮
 */
const searchHandle = () => {
  http(searchInfo.value, 1, 5)
}
/**
 * 添加对话框弹出事件
 */
const addHander = () => {
  dialogAddVisible.value = true
}
/**
 * 添加对话框 确定事件
 */
const sureHandler = () => {
  axios.post('/book/book/add', {
    bookName: addFormInfo.bookName,
    bookPrice: addFormInfo.bookPrice,
    bookImg: fileAddPath.value,
    bookWriter: addFormInfo.bookWriter,
    bookPublishHouse: addFormInfo.bookPublishHouse,
    bookPublishTime: addFormInfo.bookPublishTime,
    bookISBN: addFormInfo.bookISBN,
    bookStock: addFormInfo.bookStock,
    bookSalvesVolume: addFormInfo.bookSalvesVolume,
    bookCatalog: addFormInfo.bookCatalog,
    bookDesc: addFormInfo.bookDesc,
    bookTypeId: addFormInfo.bookTypeId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogAddVisible.value = false
      //刷新页面
      http(null, currentPage.value, 5)
      fileAddPath.value = null
    } else {
      ElMessage.error(res.data.message)
    }
  })
}
/**
 * 编辑对话框 弹出事件
 *  */
const handleEdit = (index, row) => {
  dialogEditorVisible.value = true
  axios.get('/book/book/findById', {
    params: {
      bookId: row.bookId
    }
  }).then(res => {
    if (res.data.code == 200) {
      editorFormInfo.bookId = res.data.data.bookId;
      fileEditorPath.value = res.data.data.bookImg;
      editorFormInfo.bookPrice = res.data.data.bookPrice;
      editorFormInfo.bookWriter = res.data.data.bookWriter;
      editorFormInfo.bookPublishHouse = res.data.data.bookPublishHouse;
      editorFormInfo.bookPublishTime = res.data.data.bookPublishTime;
      editorFormInfo.bookISBN = res.data.data.bookISBN;
      editorFormInfo.bookStock = res.data.data.bookStock;
      editorFormInfo.bookSalvesVolume = res.data.data.bookSalvesVolume;
      editorFormInfo.bookCatalog = res.data.data.bookCatalog;
      editorFormInfo.bookDesc = res.data.data.bookDesc;
      editorFormInfo.bookTypeId = res.data.data.bookTypeId;
    } else {
      ElMessage.error(res.data.data.message)
    }
  })

}
/**
 * 编辑对话框 确定事件
 */
const sureEditorHandler = () => {
  axios.post('/book/book/update', {
    bookId: editorFormInfo.bookId,
    bookName: editorFormInfo.bookName,
    bookPrice: editorFormInfo.bookPrice,
    bookImg: fileEditorPath.value,
    bookWriter: editorFormInfo.bookWriter,
    bookPublishHouse: editorFormInfo.bookPublishHouse,
    bookPublishTime: editorFormInfo.bookPublishTime,
    bookISBN: editorFormInfo.bookISBN,
    bookStock: editorFormInfo.bookStock,
    bookSalvesVolume: editorFormInfo.bookSalvesVolume,
    bookCatalog: editorFormInfo.bookCatalog,
    bookDesc: editorFormInfo.bookDesc,
    bookTypeId: editorFormInfo.bookTypeId,
  }).then(res => {
    if (res.data.code == 200) {
      dialogEditorVisible.value = false
      http(null, currentPage.value, 5)
    } else {
      ElMessage.error(res.data.message)
    }
  })
}

/**删除 */
const handleDelete = (index, row) => {
  ElMessageBox.confirm(
      '确定删除么',
      '删除',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(() => {
    //确认删除
    axios.delete("/book/book/delete", {
      params: {
        bookId: row.bookId
      }
    }).then(res => {
      if (res.data.code == 200) {
        ElMessage({
          type: 'success',
          message: "删除成功!!!",
        })
        //刷新
        http(null, currentPage.value, 5)
      } else {
        ElMessage({
          type: 'error',
          message: res.data.message,
        })
      }
    })
  }).catch(error => {
    ElMessage({
      type: 'info',
      message: "取消删除",
    })
  })


}
</script>
<style scoped>
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.data-header {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  padding: 20px;
  width: 100%;
  background-attachment: #fff;
  box-sizing: border-box;
}

.data-header span {
  color: #6ca7ef;
  font-weight: 700;
}

.data-header .input {
  width: 300px;
}

.data-table {
  background: linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -o-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -ms-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -moz-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  background: -webkit-linear-gradient(left, rgb(89, 234, 233) 27%, rgb(131, 231, 218) 44%, rgb(69, 150, 216) 88%);
  padding: 20px;
  display: flex;
  width: 100%;
  height: 700px;
}

.page {
  /**分页模块*/
  /**固定定位 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动 */
  position: fixed;
  right: 10px;
  bottom: 100px;
}
</style>

到了这里,关于element-ui表格Table详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【element-ui】table表格底部合计自定义配置

    目录  带合计的表格设置  自定义方法  getSummaries   【element-ui】table表格底部合计自定义配置,最近做管理系统用到饿了么UI,用到了table表格合计需求,常用的table底部,有时候不是所有内容都需要合计,比如上图这个编号是数字,但是不需要合计计算处理的,这时候就需

    2024年02月11日
    浏览(54)
  • vue监听element-ui的table表格滚动事件

    这篇文章主要是讲述“如何监听element-ui table滚动事件”,按我自己尝试的方法去实现。 需求分析: 前两天做项目遇到一个问题,数据量大,然后表格渲染的很慢,而且很卡怎么办?有什么优化的方式? 那无非就是两种方法。 先加载一屏表格的数据,之后触底加载新的数据

    2024年02月12日
    浏览(58)
  • element-ui table 表格控件实现单选功能

    今天遇到一个需求,感觉挺简单的,需求如下: 就是一个表格,在表格的前面加上一个选择框,注意: 只能单选 然后我就去element ui上粘代码: 虽然element ui上有对应的单选表格,可是并不符合我的需求 然后我又发现下面有一个多选的表格,样式虽然相似,可是还是不符合我

    2024年02月11日
    浏览(55)
  • element-ui中table表格标签编辑功能的实现

    表格实现编辑功能。在实际开发过程中,我们表格的表头往往很多,有的还会发生变化,所以本文参考一位博主的代码结合自己的项目进行了改编。 参考原文链接:vue element-ui实现table表格可编辑修改

    2024年02月13日
    浏览(57)
  • vue中element-ui表格组件el-table封装,在table表格中插入图片

            这次写的项目是写后台管理系统这部分,对于后台管理使用vue写,用组件的话,table组件用得次数比较多,可以封装一个table组件。         1.如封装的table组件:  :prop=\\\"item.prop\\\"  :label=\\\"item.label\\\"是必须要有的,其他的可以根据自己需要写 。 2.封装之后是就是使

    2024年02月15日
    浏览(56)
  • vue中Element-ui 表格 (Table)合并行、列单元格

    先在el-table里加个属性:span-method绑定方法objectSpanMethod(),这个用来把你想合并的列根据你写的逻辑来合并,再写个getSpanArr(),这个写合并的逻辑。 加一个属性两个方法,然后在获取表格数据的时候调用一下getSpanArr(),示例代码写了四个逻辑,根据id相同合并,根据id和其他字段

    2024年02月10日
    浏览(48)
  • element-ui table表格 增加合计行 和 表格列固定之后 滚动条无法滚动

    是因为el-table__fixed或el-table__fixed-right有了合计之后把 el-table__body-wrapper层覆盖 el-table__fixed或el-table__fixed-right层级较高 因此点击滚动条失效 解决方法: 若想设置滚动条样式 若想合并合计行的列

    2024年02月15日
    浏览(45)
  • element-ui复杂table表格-动态新增列、动态调整行、列顺序

    目标: 实现一个复杂table具有以下功能:表格行展开、全部展开、收起、全部收起;可动态配置展示哪些列、调整列展示顺序;动态调整行顺序、行上移、行下移、行移动最顶部、行移动最底部 思路: 本质上就是将表格看成一个数组,对表格的操作当成对数组的操作。

    2024年02月11日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包