关键词：
Vue小模块之功能全面的表格（二）创建表格
技术栈
Vue全家桶：
前端框架 Vue.js
状态管理 Vuex
动态路由匹配 vue-router
http服务 axios
模块打包 webpack
UI框架 element
数据服务器
服务器端 node.js
基于node的web框架 express
分布式数据库 mongodb
mongodb工具 mongoose
数据准备
启动mongodb数据库，创建数据库test和表todos,在表格中插入几条测试数据
author一列为数组
mongodb和mongodb compass的安装过程
后台服务器
创建工程vue-table-server
npm initnpm i -s express新建todos.js用于创建Model
var mongoose = require('mongoose')
module.exports = mongoose.model('Todos', new mongoose.Schema(
name: String,
author: Array,
content: String,
status: Number,
complteDate: Date
))新建router.js用于创建路由
var router = require('express').Router()
var Todo = require('./todos')
router.route('/').get((req, res) =>
Todo.find((err, todos) =>
if (err)
console.log(err)
res.json(todos)
)
)
module.exports = router新建server.js启动服务
var express = require('express')
var app = express()
var mongoose = require('mongoose')
var url = 'mongodb://localhost:27017/test'
bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(bodyParser.urlencoded( extended: false ))
app.all('*', function(req, res, next)
res.header("Access-Control-Allow-Origin", "*")
res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type")
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
next()
)
app.use('/todos', require('./router'))
mongoose.connect(url, (err) =>
if (err)
console.log('Error: ' + err)
else
console.log('db connect success')
)
app.listen(3000, () =>
console.log('server start')
)用测试工具向http://localhost:3000/todos发送GET请求：
引入axios
回到项目vue-table-client中，在main.js中添加引用
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000/'
Vue.prototype.$ajax = axios显示数据
修改DataTable.vue
export default
components:
ViewPage
,
data()
return
data: [],
filterType: '',
statuses: ['未开始', '进行中', '搁置', '完成']
,
mounted()
this.update()
,
methods:
update()
this.$ajax.get('todos').then((res) =>
if (res.data)
this.data = res.data
).catch(err => this.$notify(
type: 'error',
message: err
))
<!-- 表格区 -->
<el-table :data="data">
<el-table-column type="expand">
<template slot-scope="scope">
<el-card header="书籍内容简介">
scope.row.content
</el-card>
</template>
</el-table-column>
<el-table-column label="学习书籍" prop="name"></el-table-column>
<el-table-column label="作者">
<template slot-scope="scope">
scope.row.author.join(', ')
</template>
</el-table-column>
<el-table-column label="学习计划状态">
<template slot-scope="scope">
statuses[scope.row.status]
</template>
</el-table-column>
<el-table-column label="学习完成时间">
<template slot-scope="scope">
new Date(scope.row.completeDate).toLocaleDateString()
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="small" type="warning" icon="el-icon-edit"></el-button>
<el-button size="small" type="danger" icon="el-icon-delete"></el-button>
</template>
</el-table-column>
</el-table>显示结果
小结
本阶段实现了从数据库中获取数据并显示到表格中，下个阶段将实现数据的搜索过滤功能
vue小模块之功能全面的表格表格数据的excel导入(代码片段)
Vue小模块之功能全面的表格（十）表格数据的Excel导入技术栈Vue全家桶：前端框架Vue.js状态管理Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据... 查看详情
vue小模块之功能全面的表格表格数据的excel导出(代码片段)
Vue小模块之功能全面的表格（九）表格数据的Excel导出技术栈Vue全家桶：前端框架Vue.js状态管理Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据... 查看详情
vue小模块之功能全面的表格对话框的弹出和关闭(代码片段)
Vue小模块之功能全面的表格（五）对话框的弹出和关闭技术栈Vue全家桶：前端框架Vue.js状态管理Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式数据... 查看详情
vue小模块之功能全面的表格实现带有数组输入的表单(代码片段)
Vue小模块之功能全面的表格（六）实现带有数组输入的表单技术栈Vue全家桶：前端框架Vue.js状态管理Vuex动态路由匹配vue-routerhttp服务axios模块打包webpackUI框架element数据服务器服务器端node.js基于node的web框架express分布式... 查看详情
vue中element的table表格导入与导出为excel表格的实现(代码片段)
...excel所需依赖和按需加载2.2vue-element-admin提供的导出功能模块2.3懒加载引入js-xlsx2.4导出数据结构的处理2.5复杂表头的实现一、导入2.1安装xlsx插件$npmixlsx@0.17.02.2新建导入功能组件新建组件UploadExcel/index.vue<template><divclass... 查看详情
小程序中读取腾讯文档的表格数据(代码片段)
...码工具来接入腾讯文档的数据，实现数据的在线管理功能。1创建连接器如果希望接入腾讯文档的功能&#x 查看详情
vue导出excel数据表格功能(代码片段)
前端工作量最多的就是需求，需求就是一直在变，比如当前端数据写完之后，需要用Excel把数据下载出来。第一步安装依赖包,需要把代码下载你的项目当中 cnpminstall file-saver cnpminstall xlsx cnpmin... 查看详情
layui之datatable组件v1.0(父子表管理传值/数据表格与select&laydate结合等)(代码片段)
...DataTable.js 下载链接 密码：uzfh在页面中进行模块化引用代码示例<script>layui.config(base:‘../../common/‘//静态资源所在路径).extend(dataTable:"../lib/extend/dataTable").use(["dataTable"],function()vardt=layui.dataTable;);</script>二、组... 查看详情
vue项目实现导入导出excel表格功能(代码片段)
前提:在我的项目中我使用的是ElementUi前端UI框架，用到的是里面的Upload上传组件。第一步：需要安装三个依赖npminstall-Sfile-saverxlsx （这里其实安装了2个依赖）npminstall-Dscript-loader 第二步：在main.js文件中全局导入挂载xlsx插... 查看详情
vue和react全面对比(详解)(代码片段)
...图组件 c、注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。 区别： a、优化 b、HTML&CSS c、构建工具 d、数据绑定 查看详情
python基础之函数和模块(代码片段)
...使用函数的定义：把具有独立功能的代码块组织成一个小模块，在需要的时候调用。或者说，函数是组织好的，可重复使用的，用来实现单一，或相关联功能的代码段。函数的使用：1.定义函数；2.调用函数。函数的作用：能提... 查看详情
vue表格树固定表头(代码片段)
参考网上黄龙的表格树进行完善，并添加固定表头等的功能，目前是在iview的项目中实现，如果想在element中实现的话修改对应的元素标签及相关写法即可。<template><divref="table":style="width:treeGridWidth"class=‘autoTabletree-grid‘>... 查看详情
若依vue实现动态表格，可动态控制列的显示隐藏及操作权限(代码片段)
...vue通过数据表反向生成代码，实现数据表的增删改查功能。但在实际开发中，经常需要在一个页面动态加载不同的表格（不同的表格表头和表格内容），这时候若依生成的固定的页面表格标题及内容已经不能... 查看详情
python-通过googlesheetapi创建google表格并将其发布到网站(代码片段)
...cel文件通过API上传到Google表格（可能是Google云端硬盘）的功能（我认为这是可能的）。然后，该功能会将Google表格发布到Web（就像Google表格WebUI中的PublishtoWeb功能一样），以便将Google表格嵌入到我的网站中进行预览。我不知道API... 查看详情
vue+elementui之el-table的二次封装，带条件查询及翻页功能(代码片段)
在实际开发后台项目中会存在很多表格，表格数据过多就需要分页和按条件筛选搜索查询，于是就对el-table进行了二次封装。页面效果如图： 第一步：首先创建一个searchForm.vue文件，放置筛选查询条件和按钮... 查看详情
vue基于el-timeline组件实现动态表格时间线(代码片段)
...如下图。实现效果：实现思路：其实实现这个小功能非常简单，首先，我们要在el-timeline-item标签循环最外层的 查看详情
vue基于el-timeline组件实现动态表格时间线(代码片段)
...如下图。实现效果：实现思路：其实实现这个小功能非常简单，首先，我们要在el-timeline-item标签循环最外层的 查看详情
使用vue-easytable实现仿excel表格，支持可编辑添加删除行虚拟表格等功能(代码片段)
使用npm安装vue-easytablenpminstall--savevue-easytable在main.js中写入以下内容：//引入样式import"vue-easytable/libs/theme-default/index.css";//引入组件库importVueEasytablefrom"vue-easytable";Vue.use(Vu 查看详情