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 ...
随机推荐
- jQuery 实现 全选/全不选/反选
<button id="getall" class="btn btn-warning">全选</button><button id ...
- 驰骋CCFlow开源工作流程引擎如何设置PDF打印
前言 经常有驰骋CCFlow爱好者朋友提问关于打印相关问题.在这篇博文中大家介绍一下工作流引擎CCFlow的HTML打印和PDF打印,针对Java版本和.NET版本有不同的操作步骤,包括开关设置.水印 ...
- 烽火SATA SSD DSS200-B
烽火SATA SSD DSS200-B 运营商用户 > 产品与解决方案 > 产品 烽火SATA SSD DSS200-B 烽火通信 DSS200-B 2.5" SATA SSD ...
- 013.Ansible Playbook include
一 include 当项目越大,tasks越多的时候.如果将多有的task写入一个playbook中,可读性很差,就需要重新组织playbook 可以把一个playbook分成若干份晓得palyboo ...
- Ansible_常用模块
一.Ansible常用模块 1.ansible常用模块command.shell.raw的区别: command模块不是调用的shell的指令,所以没有bash的环境变量 shell模块调用的/bin ...
- Centos 7.4搭建es7.12.0+Skywalking7.8.5
Skywalking整体架构图和分布式追踪系统原理:https://blog.csdn.net/weixin_39866487/article/details/111581322 软件包版本1.ela ...
- Django使用Ace实现在线编辑器
前言:最近自己开发SQL工单功能,期间接触到了Ace在线编辑器,折腾一下,感觉功能挺多,特意去了解学习一下分享跟大家. ACE 是一个功能非常强大的编辑器,实现语法高亮.代码补全功能,还有很多主题,支 ...
- unity项目字符串转为Vector3和Quaternion
运用环境:一般在读取csv表格的数据时是string类型转为Vector3或者Quaternion类型 字符串格式:x,x,x /x,x,x,x (英文逗号) 方法: /// <summary& ...
- PDF 文件编写器 C# 类库（版本 1.28.0）使用详解
PDF File Writer 是一个 C# .NET 类库,允许应用程序创建 PDF 文件. PDF File Writer C# 类库使 .NET 应用程序能够生成 PDF 文档.该库使应用程序免 ...
- GO学习-(29) Go语言操作etcd
Go语言操作etcd etcd是近几年比较火热的一个开源的.分布式的键值对数据存储系统,提供共享配置.服务的注册和发现,本文主要介绍etcd的安装和使用. etcd etcd介绍 etcd是使用Go语 ...