Vue.js
学习笔记
tellmewsm
这个作者很懒,什么都没留下…
展开
-
Vue——多选table列进行操作,支持分页
1、官网提供:手动添加一个el-table-column,设type属性为selection即可<template> <div> <el-button @click="TestSelect">按钮</el-button> </div> <el-table ref="multipleTable" :data="tableData"原创 2020-10-25 00:06:11 · 2815 阅读 · 3 评论 -
Vue——filters、formatter改变table列显示
前端经常在表格显示的时候需要进行列转换,目前使用到两种方式1、使用elementui中formatter用于格式化指定列的值,接受一个Function,会传入两个参数:row和column,可以根据自己的需求进行处理。2、使用filters过滤器:跟methods同级{{ message | filterA('arg1', arg2) }}这里,filterA被定义为接收三个参数的过滤器函数。其中message的值作为第一个参数,普通字符串'arg1'作为第二个参数,表达式...原创 2020-10-25 00:01:23 · 1482 阅读 · 0 评论 -
Vue——el-option下拉框绑定
1、正常使用v-for 进行遍历 下拉框内容,如果需要增加一个自定义的值,则加一个el-optionel-option用法: 参数 说明 类型 可选值 默认值 value 选项的值 string/number/object — — label 选项的标签,若不原创 2020-10-24 23:58:16 · 44176 阅读 · 1 评论 -
Vue——DatePicker日期选择器进行日期格式化
1、Element 日期选择器控件: <div> <el-form :inline="true" class="demo-form-inline"> <el-form-item label="Time" required="required"> ...原创 2019-10-28 17:58:19 · 4515 阅读 · 1 评论 -
Docker——nginx部署vue项目
docker使用 nginx 部署vue项目的两种方式一、docker 安装 nginx1、docker search nginxMacBookPro:share wuxi$ docker search nginxNAME DESCRIPTION STA...原创 2019-10-17 17:51:19 · 934 阅读 · 0 评论 -
Vue——项目打包部署到nginx
1、修改vue项目config文件夹index.js文件build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', // 绝大多数我们使用"...原创 2019-10-17 17:45:57 · 289 阅读 · 0 评论 -
Vue——项目打包部署到tomcat
1、修改vue项目config文件夹index.js文件build: { index: path.resolve(__dirname, '../dist/index.html'), assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', // 绝大多数我们使用"...原创 2019-10-17 17:43:03 · 1505 阅读 · 0 评论 -
Vue——el-table导出excel
Element使用时遇到一个问题:el-table导出到excel的时候数据重复了 ,删除el-table的fixed数据可以解决fixed 列是否固定在左侧或者右侧,true 表示固定在左侧 string, boolean true, left, right — 1、 安装依赖:npm install --save xlsxnpm install --sa...原创 2019-09-30 17:06:33 · 1434 阅读 · 3 评论 -
Vue——vue.js获取axios及request-promise返回数据
vue调用接口,在main.js中引入import rp from 'request-promise'Vue.prototype.$request = rpimport axios from 'axios'Vue.prototype.$ajax = axiosscript 中 mydevices:[] 从接口获取方法如 searchdevice以下三种方法获取<scr...原创 2019-09-30 17:04:13 · 4117 阅读 · 0 评论 -
Vue——v-if控制元素是否显示
show.vue文件如下: <el-table-column label="状态"> <template slot-scope="scope"> <el-button v-if="show" :loading="true" type="danger"...原创 2019-09-30 17:01:53 · 5337 阅读 · 0 评论 -
Vue——html引用cdn
单页面引用cdn 显示图表和表单,构建本地简单的测试报告Echarts:https://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20EChartselement-ui:https://element.eleme.cn/#/zh-CN/component/installation...原创 2019-09-30 15:49:50 · 1985 阅读 · 0 评论 -
Vue——el-table中打开dialog修改数据
1、表格显示数据<el-table :data="tableData" style="width: 100%"> <el-table-column prop="battery_min" label="最小值" width="180"/> <el-table-colum...原创 2019-09-27 22:29:41 · 6608 阅读 · 5 评论 -
Vue——el-pagination分页显示
使用Element ui 中el-pagination进行分页显示1、el-table进行数据筛选::data="tableData3.slice((currentPage-1)*pagesize,currentPage*pagesize)"过滤当前页面需要显示的数据2、增加div 显示分页功能,修改total为tableData3数据的数量,tableData3我这边定义的[] 接口...原创 2019-09-17 18:20:05 · 12448 阅读 · 1 评论 -
Vue——vscode格式化代码
1、vscode安装插件ESLint及Vetur(解决vue文件代码高亮)2、格式化代码:Preferences——Settings,右上角 点开图标{ } ,对settings.json进行修改{ "eslint.enable": true, "eslint.autoFixOnSave": true, "eslint.run": "onType", "eslint.o...原创 2019-09-05 18:59:22 · 987 阅读 · 0 评论