vue+element表格
效果图
备注：前后端分离实现效果
接下来是代码环节
<template>
<div class="comprehensive-table-container">
<el-alert
:closable="false"
show-icon
title="三级路由【缓存路由、固定表格高度、并根据窗口大小自适应】的示例。详情页请点击操作列按钮，支持tab多开并高亮左侧菜单"
type="success"
/>
<vab-query-form>
<vab-query-form-top-panel>
<el-form
ref="form"
:inline="true"
label-width="49px"
:model="queryForm"
@submit.native.prevent
>
<el-form-item label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item v-show="!fold" label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item v-show="!fold" label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item v-show="!fold" label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item v-show="!fold" label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item v-show="!fold" label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item v-show="!fold" label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item v-show="!fold" label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item v-show="!fold" label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item v-show="!fold" label="标题">
<el-input v-model="queryForm.title" placeholder="请输入标题" />
</el-form-item>
<el-form-item>
<el-button
icon="el-icon-search"
native-type="submit"
type="primary"
@click="handleQuery"
>
查询
</el-button>
<el-button type="text" @click="handleFold">
<span v-if="fold">展开</span>
<span v-else>合并</span>
<vab-icon
class="vab-dropdown"
:class="{ 'vab-dropdown-active': fold }"
icon="arrow-up-s-line"
/>
</el-button>
</el-form-item>
</el-form>
</vab-query-form-top-panel>
<vab-query-form-left-panel>
<el-button icon="el-icon-plus" type="primary" @click="handleAdd">
添加
</el-button>
<el-button icon="el-icon-delete" type="danger" @click="handleDelete">
删除
</el-button>
<el-button type="primary" @click="handleMessage">
$baseMessage
</el-button>
<el-button type="primary" @click="handleAlert">$baseAlert</el-button>
<el-button type="primary" @click="handleConfirm">
$baseConfirm
</el-button>
<el-button type="primary" @click="handleNotify">$baseNotify</el-button>
<el-badge class="item" value="New">
<el-button
icon="el-icon-info"
style="margin: 0 0 10px 0 !important"
type="primary"
@click="handleDetail"
>
详情页支持tab多开并高亮左侧菜单
</el-button>
</el-badge>
</vab-query-form-left-panel>
</vab-query-form>
<el-table
ref="tableSort"
v-loading="listLoading"
border
:data="list"
:height="height"
@selection-change="setSelectRows"
@sort-change="tableSortChange"
>
<el-table-column
align="center"
show-overflow-tooltip
type="selection"
width="55"
/>
<el-table-column
align="center"
label="序号"
show-overflow-tooltip
width="55"
>
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column
align="center"
label="标题"
prop="title"
show-overflow-tooltip
/>
<el-table-column
align="center"
label="作者"
prop="author"
show-overflow-tooltip
/>
<el-table-column align="center" label="评级">
<template #default="{ row }">
<el-rate v-model="row.rate" disabled />
</template>
</el-table-column>
<el-table-column align="center" label="头像">
<template #default="{ row }">
<el-image
v-if="imgShow"
:preview-src-list="imageList"
:src="row.img"
/>
</template>
</el-table-column>
<el-table-column
align="center"
label="点击量"
prop="pageViews"
show-overflow-tooltip
sortable
/>
<el-table-column
align="center"
label="开关"
prop="switch"
show-overflow-tooltip
>
<template #default="{ row }">
<el-tooltip
:content="row.switch === 0 ? '点击开启' : '点击关闭'"
:enterable="false"
placement="top"
>
<el-switch v-model="row.switch" />
</el-tooltip>
</template>
</el-table-column>
<el-table-column align="center" label="状态" show-overflow-tooltip>
<template #default="{ row }">
<el-tooltip
class="item"
:content="row.status"
effect="dark"
placement="top-start"
>
<el-tag :type="row.status | statusFilter">
{{ row.status }}
</el-tag>
</el-tooltip>
</template>
</el-table-column>
<el-table-column
align="center"
label="时间"
prop="datetime"
show-overflow-tooltip
width="200"
/>
<el-table-column
align="center"
label="操作"
show-overflow-tooltip
width="130"
>
<template #default="{ row }">
<el-button type="text" @click="handleDetail(row)">详情</el-button>
<el-button type="text" @click="handleEdit(row)">编辑</el-button>
<el-button type="text" @click="handleDelete(row)">删除</el-button>
</template>
</el-table-column>
<template #empty>
<el-image
class="vab-data-empty"
:src="require('@/assets/empty_images/data_empty.png')"
/>
</template>
</el-table>
<el-pagination
background
:current-page="queryForm.pageNo"
:layout="layout"
:page-size="queryForm.pageSize"
:total="total"
@current-change="handleCurrentChange"
@size-change="handleSizeChange"
/>
<table-edit ref="edit" @fetch-data="fetchData" />
</div>
</template>
<script>
import { doDelete, getList } from '@/api/table'
import TableEdit from './components/TableEdit'
export default {
name: 'ComprehensiveTable',
components: {
TableEdit,
},
filters: {
statusFilter(status) {
const statusMap = {
published: 'success',
draft: 'gray',
deleted: 'danger',
}
return statusMap[status]
},
},
data() {
return {
fold: false,
height: this.$baseTableHeight(3) - 30,
imgShow: true,
list: [],
imageList: [],
listLoading: true,
layout: 'total, sizes, prev, pager, next, jumper',
total: 0,
selectRows: '',
queryForm: {
pageNo: 1,
pageSize: 10,
},
}
},
beforeMount() {
window.addEventListener('resize', this.handleHeight)
},
beforeDestroy() {
window.removeEventListener('resize', this.handleHeight)
},
created() {
this.fetchData()
},
methods: {
handleFold() {
this.fold = !this.fold
this.handleHeight()
},
handleHeight() {
if (this.fold) this.height = this.$baseTableHeight(2) - 47
else this.height = this.$baseTableHeight(3) - 30
},
tableSortChange() {
const imageList = []
this.$refs.tableSort.tableData.forEach((item) => {
imageList.push(item.img)
})
this.imageList = imageList
},
setSelectRows(val) {
this.selectRows = val
},
handleAdd() {
this.$refs['edit'].showEdit()
},
handleEdit(row) {
this.$refs['edit'].showEdit(row)
},
handleDelete(row) {
if (row.id) {
this.$baseConfirm('你确定要删除当前项吗', null, async () => {
const { msg } = await doDelete({ ids: row.id })
this.$baseMessage(msg, 'success', false, 'vab-hey-message-success')
await this.fetchData()
})
} else {
if (this.selectRows.length > 0) {
const ids = this.selectRows.map((item) => item.id).join()
this.$baseConfirm('你确定要删除选中项吗', null, async () => {
const { msg } = await doDelete({ ids: ids })
this.$baseMessage(
msg,
'success',
false,
'vab-hey-message-success'
)
await this.fetchData()
})
} else {
this.$baseMessage(
'未选中任何行',
'error',
false,
'vab-hey-message-error'
)
}
}
},
handleDetail(row) {
if (row.id)
this.$router.push({
path: '/vab/table/detail',
query: row,
})
else {
if (this.selectRows.length === 1) {
this.$router.push({
path: '/vab/table/detail',
query: this.selectRows[0],
})
} else {
this.$baseMessage(
'请选择一行进行详情页跳转',
'error',
false,
'vab-hey-message-error'
)
}
}
},
handleSizeChange(val) {
this.queryForm.pageSize = val
this.fetchData()
},
handleCurrentChange(val) {
this.queryForm.pageNo = val
this.fetchData()
},
handleQuery() {
this.queryForm.pageNo = 1
this.fetchData()
},
async fetchData() {
this.listLoading = true
const { data } = await getList(this.queryForm)
const { list, total } = data
this.list = list
const imageList = []
list.forEach((item) => {
imageList.push(item.img)
})
this.imageList = imageList
this.total = total
this.listLoading = false
setTimeout(() => {
this.toggleSelection([this.list[0]])
}, 0)
},
handleMessage() {
this.$baseMessage('test1', 'success', false, 'vab-hey-message-success')
},
handleAlert() {
this.$baseAlert('11')
this.$baseAlert('11', '自定义标题', () => {
/* 可以写回调; */
})
this.$baseAlert('11', null, () => {
/* 可以写回调; */
})
},
handleConfirm() {
this.$baseConfirm(
'你确定要执行该操作?',
null,
() => {
/* 可以写回调; */
},
() => {
/* 可以写回调; */
}
)
},
handleNotify() {
this.$baseNotify('测试消息提示', 'test', 'success', 'bottom-right')
},
toggleSelection(rows) {
if (rows) {
rows.forEach((row) => {
this.$refs.tableSort.toggleRowSelection(row)
})
} else {
this.$refs.tableSort.clearSelection()
}
},
},
}
</script>
2.mock里面的代码
const { mock } = require('mockjs')
const { handleRandomImage } = require('../utils')
const List = []
const count = 50
for (let i = 0; i < count; i++) {
List.push(
mock({
uuid: '@uuid',
id: '@id',
title: '@title(1, 2)',
description: '@csentence',
'status|1': ['published', 'draft', 'deleted'],
author: '@cname',
datetime: '@datetime',
pageViews: '@integer(300, 5000)',
img: handleRandomImage(228, 228),
switch: '@boolean',
percent: '@integer(80,99)',
'rate|1': [1, 2, 3, 4, 5],
percentage: '@integer(0,100)',
})
)
}
module.exports = [
{
url: '/table/getList',
type: 'get',
response(config) {
const { title, pageNo = 1, pageSize = 20 } = config.query
const mockList = List.filter(
(item) => !(title && item.title.indexOf(title) < 0)
)
const list = mockList.filter(
(item, index) =>
index < pageSize * pageNo && index >= pageSize * (pageNo - 1)
)
return {
code: 200,
msg: 'success',
data: { list, ...{ total: mockList.length } },
}
},
},
{
url: '/table/doEdit',
type: 'post',
response() {
return {
code: 200,
msg: '模拟保存成功',
}
},
},
{
url: '/table/doDelete',
type: 'post',
response() {
return {
code: 200,
msg: '模拟删除成功',
}
},
},
]
3.API
import request from '@/utils/request'
export function getList(params) {
return request({
url: '/table/getList',
method: 'get',
params,
})
}
export function doEdit(data) {
return request({
url: '/table/doEdit',
method: 'post',
data,
})
}
export function doDelete(data) {
return request({
url: '/table/doDelete',
method: 'post',
data,
})
}
vue+element表格的更多相关文章
- vue+element 表格formatter数据格式化并且插入html标签
前言 vue中 element框架,其中表格组件,我既要行内数据格式化,又要插入html标签 一贯思维,二者不可兼得也 一.element 表格 数据格式化 demo <el-table-col ...
- vue+Element 表格中的树形数据
template部分 只在树形的结构中显示编辑与删除按钮 这里我只是简单的做了一个 v-if 判断在操作列中 ,判断是否存在级别这个字段 <div> <el-table :dat ...
- vue+element 表格筛选
筛选是element 组件 自己有的东西,按照文档撸 是没有问题 这里存在一个情况是,如果 筛选 的数据没有 那么整个表格为空白,产品要加提示 例如:暂无筛选的数据 解决方案:通过 ref 获取整 ...
- vue+element 表格导出Excel文件
https://www.cnblogs.com/bobodeboke/p/8867481.html 非常感谢 这个大佬 才让我搞到了Blob.js 和 Export2Excel.js 如果最后运行时 ...
- vue+element 表格按需合并
这个功能难度感觉一般般吧,记录一下,以后碰到了直接来复制,懒得再写了 效果如下: 前6列是合并,后面的有几行,动态显示几行 重点是在数据处理上面做文章,合并列大家都会,数据处理呢?这样来处理, 我们拿 ...
- vue+Element 表格编辑
先上效果 <template> <div> <el-table :data="tableData" style="width: 100%&q ...
- Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- vue + element ui 实现实现动态渲染表格
前言:之前需要做一个页面,能够通过表名动态渲染出不同的表格,这里记录一下.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9786326.html 网站地址:我的 ...
- vue + element ui 表格自定义表头，提供线上demo
前言:工作中用到 vue+element ui 的前端框架,需要使用自定义表头,需要使用 re.转载请注明出处:https://www.cnblogs.com/yuxiaole/p/9710826.h ...
随机推荐
- [Web] 计算机网络课程（一）
局域网 覆盖范围小,自己花钱买设备,自己单位维护 线长不超过100米,带宽固定(10M 100M 1000M) 星形结构,上层交换机口少,但每个口带宽高 广域网 距离远 如在家通过ADSL拨号上网,或 ...
- Win10 禁用摄像头的方法及注意事项
Win10 禁用摄像头的方法及注意事项 windows教程 2020-03-04 223 最新的Windows10系统中应该如何禁用摄像头呢?下面MS酋长与大家分享一下.当然,如果你说用个便利贴把摄 ...
- Linux中find命令用法全汇总，看完就没有不会用的！
Linux中find命令用法全汇总,看完就没有不会用的! 中琦2513 马哥Linux运维 2017-04-10 糖豆贴心提醒,本文阅读时间7分钟 Linux 查找命令是Linux系统中最重要和最 ...
- 066.Python框架DRF之序列化器Serializer
一 序列化器-Serializer 作用: 1. 序列化,序列化器会把模型对象转换成字典,经过response以后变成json字符串 2. 反序列化,把客户端发送过来的数据,经过request以后变成 ...
- 002.Python数据类型
一 python语言注释 就是对代码的解释, 方便大家阅读代码用的 1.1 注释的分类 (1)单行注释 # print 在python2.x print "1" # print 在 ...
- 戴尔 R730xd 服务器更改管理口密码 图文教程
一.开机根据提示按F2进入配置界面 - 选择中间的iDRAC Setting选项,回车确认 二.进入之后选择 user configuration 选项 三.在change password 处键入新 ...
- Docker的介绍和安装（1）
一.虚拟化简介 1.虚拟化概念 计算机虚拟化(Computing Virtualization),一种资源管理技术,是指通过虚拟化技术将一台计算机的各种实体资源 , 如处理器 , 网络 , 内存及存储 ...
- IT菜鸟之思科模拟实验（PT）
思科官方的模拟软件:cisco packet tracer 网卡端口类型: Ethernet(以太网) 十兆 FastEthernet 百兆 GigabitEthernet 千兆 交换机的端口默认都是 ...
- redis的rehash过程
在扩容和收缩的时候,如果哈希字典中有很多元素,一次性将这些键全部rehash到ht[1]的话,可能会导致服务器在一段时间内停止服务.所以,采用渐进式rehash的方式,详细步骤如下: 为ht[1]分配 ...
- SystemVerilog数组（一）