vue中element-ui固定el-dialog模态窗高度 vue中element-ui固定el-dialog模态窗高度，超出显示纵向滚动条，可以使用下面方法<style lang="css"> .el-dialog { margin: 5vh auto !important; } .el-dialog__body { height: 75vh; overflow: hidden; overflow-y: auto; } </style>

elementUI el-table 表格实现手动选择展示列 一、使用场景：在使用elementui开发表格功能的时候，我们会遇到表格字段列数过多的情况，这时我们就需要对其进行设置，选择是否展示列，默认展示多少列，还有就是到处表格数据的时候，我们可以指定选择列到处，这样体验方面是很好的。二、效果展示：点击操作按，展开筛选类选项三、实现思路：（1）表格默认展示所有字段，每个字段通过 v-if 属性来进行判断是否显示；（2）点击表格最后一列表头（操作栏），弹出选择框；【el-popover】（3）选择框中包括：全选复选框、所有字段复选框组、取消按钮、确定按钮；【el-checkbox-group】（4）选择字段值后，点击“确定”按钮：（5）更新每个字段值的show属性（true / false），选中当前表格所展示的字段；重新渲染表格；四、实现代码：实现分页，筛选效果，展示数据。1、前端代码<template> <div> <!-- 卡片视图区域 --> <el-card class="box-card"> <el-table :data="tableData" border stripe @selection-change="handleSelectionChange" class="table-container" v-loading="listLoading"> <el-table-column align="left" v-if="showColumn('id')" label="ID" prop="id" min-width="100" /> <el-table-column align="left" v-if="showColumn('name')" label="名称" prop="name" min-width="150" /> <el-table-column align="left" v-if="showColumn('money')" label="优惠金额" prop="money" min-width="150" /> <el-table-column align="left" v-if="showColumn('created_at')" label="添加时间" prop="created_at" min-width="150" /> <el-table-column align="left" v-if="showColumn('updated_at')" label="最近修改" prop="updated_at" min-width="180" /> <el-table-column align="center" label="操作" min-width="150" fixed="right"> <template slot="header" slot-scope="scope"> <el-popover width="200" popper-class="tablePopover" trigger="manual" ref="tablePopover" v-model="popoverVisible" @show="showPopover"> <span slot="reference" @click="openPopover">操作<i class="el-icon-arrow-down" style="font-weight: bold;" /></span> <div class="popoverCheckBoxArea"> <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> <div style="margin: 10px 0;"></div> <el-checkbox-group v-model="checkedColumns" @change="handleCheckedColumnsChange"> <el-checkbox v-for="column in columns" :label="column.value" :key="column.value">{{column.text}}</el-checkbox> </el-checkbox-group> </div> <div class="popoverCheckBoxButton"> <el-button size="mini" @click="canclePopover">取消</el-button> <el-button type="primary" size="mini" @click="confirmPopover">确定</el-button> </div> </el-popover> </template> <template slot-scope="scope"> <el-button type="primary" size="mini" @click="showEditDialog(scope.row.id)">编辑</el-button> <el-button type="danger" size="mini" @click="removeAdById(scope.row.id)">删除</el-button> </template> </el-table-column> </el-table> <!-- 分页区域 --> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pagenum" :page-sizes="[3,500,5000,10000,50000]" :page-size="queryInfo.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </el-card> </div> </template>2、js代码：<script> export default { data(){ return{ // data中定义的变量 listLoading: false, tableData: [], // 获取飞猪门票管理新列表的参数对象 queryInfo: { query: '', // 当前的页数 pagenum: 1, // 当前每页显示多少条数据 pagesize: 3 }, total: 0, // 选择展示的字段数组 columns: [ { text: 'ID', value: 'id', show: true }, { text: '名称', value: 'name', show: true }, { text: '优惠金额', value: 'money', show: true }, { text: '添加时间', value: 'created_at', show: true }, { text: '最近修改', value: 'updated_at', show: true }, ], popoverVisible: false, checkAll: true, checkedColumns: [], isIndeterminate: false, } }, created () { this.getFliggyList() }, methods: { async getFliggyList () { const { data: res } = await this.$http.get('shanrong_money/index', { params: this.queryInfo }) if (res.code != 200) { return this.$message.error(res.msg) } this.loading=false console.log( res.data.data) this.tableData = res.data.data this.total = res.data.total this.queryInfo.pagenum = res.data.current_page }, // 监听 pagesize 改变事件 handleSizeChange (newSize) { // console.log(newSize) this.queryInfo.pagesize = newSize this.getFliggyList() }, // 监听页面值改变的事件 handleCurrentChange (newPage) { // console.log(newPage) this.queryInfo.pagenum = newPage this.getFliggyList() }, // -------------------------- Popover相关方法 START ------------------------- // 点击“操作”打开菜单选择框 openPopover() { this.popoverVisible = true; // 去掉第二个popover弹框（修改问题：使用fixed固定列后popover会出现两个） this.$nextTick(() => { document.getElementsByClassName('tablePopover')[1].style.display = 'none'; }) }, // 弹出框打开时触发 showPopover() { // 选中目前已展示的字段值 this.checkedColumns = []; this.columns.map(item => { if(item.show) { this.checkedColumns.push(item.value); } }); // 如果目前展示的是全部字段，则需要勾选上“全选”按钮 if(this.columns.length == this.checkedColumns.length) { this.checkAll = true; this.isIndeterminate = false; } // 重新渲染表格 this.$nextTick(() => { this.$refs.multipleTable.doLayout(); }) }, // 点击弹出框的“全选”按钮 handleCheckAllChange(val) { let columnsValueList = []; this.columns.map(item => columnsValueList.push(item.value)); this.checkedColumns = val ? columnsValueList : []; this.isIndeterminate = false; }, // 点击弹出框的选择展示菜单的复选框 handleCheckedColumnsChange(value) { let checkedCount = value.length; this.checkAll = checkedCount === this.columns.length; this.isIndeterminate = checkedCount > 0 && checkedCount < this.columns.length; }, // 点击弹出框的“取消”按钮 canclePopover() { this.popoverVisible = false; // this.$refs.tablePopover.doClose(); }, // 点击弹出框的“确定”按钮 confirmPopover() { if(this.checkedColumns.length == 0) { this.$message({ message: '请选择需要展示的表格字段', center: true, customClass: 'message-error' }); return; } // 根据选择结果，遍历修改列是否展示的属性值 this.columns.forEach(item => { if(this.checkedColumns.some(el => el == item.value)) { item.show = true; } else { item.show = false; } }) this.popoverVisible = false; // this.$refs.tablePopover.doClose(); // 重新渲染表格 this.$nextTick(() => { this.$refs.multipleTable.doLayout(); }) }, // 表格列是否显示的方法 showColumn(currentColumn){ return this.columns.find(item => item.value == currentColumn).show; }, // -------------------------- Popover相关方法 END ------------------------- }, } </script> <style scoped> .popoverCheckBoxArea { padding: 10px 20px 0 20px; margin-bottom: 10px; max-height: 600px; overflow-y: auto; overflow-x: hidden; } .popoverCheckBoxButton { text-align: center; padding-bottom: 10px; } </style>

Vue如何使用过滤器 很多时候，后端给接口的数据不是我们要的，我们就需要Vue使用过滤器，转换成我们想到的结果数据。模板代码：<template> <div> <p>{{data.actors|actorfilter}}</p> </div> </template>js代码<script> import Vue from 'vue' Vue.filter("actorfilter",function(data){ var newlist = data.map(item=>item.name) return newlist.join(' ') }) </script>

Macbook安装vue开发环境，mac配置vue环境、脚手架 Mac端安装vue环境和window端差不多，但也是有点区别，这里博主一开始安装也遇到很多问题，这里写一篇文章记录下第一次在Mac下安装的经历教程，同事也分享给各位果粉开发者。注意苹果电脑中需要在终端使用sudo命令来安装，不然会出现权限问题，另外安装包在官网要选择MacOS版。1、下载Mac版nodejs，官网直通车：https://nodejs.org/en/download2、安装vue，终端执行sudo npm install -g vue3、安装vue脚手架，终端执行sudo npm install -g @vue/cli4、终端运行vue ui，执行命令vue ui 看到上面结果，说明vue环境安装成功了，vue ui 面板也安装成功了。注意：如果执行上面命令出现出现zsh: command not found: vue 或者zsh: command not found: npm，就需要执行下面操作，把环境变量加入vim .bash_profile PATH=$PATH:/usr/local/bin/ :wq 使环境变量生效echo $PATH关于vue环境以及开发问题：详见：Vue,JavaScript框架,前端开发框架,Vue问题集合

解决vue使用element checkbox 点击一个结果全选的问题 问题描述：按照官方文档使用element的checkbox复选，点击任意一个，结果全选了1、页面代码：<el-form-item label="可见数据" prop="datasoure"> <el-checkbox-group v-model="addForm.datasoure" @change="handleCheckedChange"> <el-checkbox v-for="city in cities" :label="city" :key="city" border>{{city}}</el-checkbox> </el-checkbox-group> </el-form-item>2、js代码：const cityOptions = ['上海', '北京', '广州', '深圳']; return { cities: cityOptions, addForm: { datasoure: '', }, }3、解决方案：把datasoure: ''改数组即可，即datasoure: []