草庐IT

tspan_element

全部标签

vue+element ui 之table中表单校验

业务需求:1,后台返回的是一个list数组,展示要表格的形式,但是每一项都可以编辑,而且都是必填。效果图如下:操作流程1,首先先弄一个‘保存‘的按钮’2,表格的展示和校验(我这边是一个双层的list),第一层是渲染表格的第一栏(一级标签),第二层是渲染表格的第二栏(二级标签),然后我的二级标签是一个list,所以要嵌套循环3,因为我的第一栏的表头多加了个按钮,所以第一栏的表头弄了自定义 3,因为表格是动态的,支持用户随意添加的。valueStatus:目的是区分该数据是后台返回的,还是后面添加的输入框 4,删除一整行的表格,目前删除只是前端的删除,并未调用接口5,最后保存的时候做校验直接上代码

解决Vue+Element UI 使用el-aside时菜单栏无法撑起整个侧边栏高度,解决点开菜单栏时有部分突起问题。

当我们使用elementui的时,发现菜单栏无法撑满页面高度的100% 采用css样式设置height:100%的方法也无效我们将height:100%改为height:100vh即可效果图如下 点开菜单栏时,我们发现菜单栏右侧会有部分突起我们给定义一个类名使用css进行封装即可解决    

element-ui el-date-picker日期选择器 value-format问题

通过原生js和moment.js分别获取moment().format('YYYY-MM-DDHH:mm:ss')格式的时间moment.js:文档|Moment.js中文网(momentjs.cn)

【element-ui】table表格底部合计自定义配置

目录 带合计的表格设置 自定义方法  getSummaries 【element-ui】table表格底部合计自定义配置,最近做管理系统用到饿了么UI,用到了table表格合计需求,常用的table底部,有时候不是所有内容都需要合计,比如上图这个编号是数字,但是不需要合计计算处理的,这时候就需要用到自定义表格,把不需要合计的内容隐藏掉,效果如下: 方法写在下面: 带合计的表格设置 1.参数show-summary 2.方法:summary-method="getSummaries" 自定义方法  getSummaries//自定义方法getSummaries(param){const{colu

vue项目引入element-ui的三种方式

1、element-ui插件引用(推荐)通过执行命令vueaddelement来进行引入2、npminstall(此种方式为全量引入element-ui,打包体积大)通过执行命令npmielement-ui-S安装依赖main.js文件引入element-uiimportElementUIfrom'element-ui'Vue.use(ElementUI)main.js文件全局引入element-ui样式import'element-ui/lib/theme-chalk/index.css'3、按需引入element-ui安装babel-plugin-componentnpmi-Dbabel-

element ui 中 Cascader 级联选择器实现 动态加载 动态禁用 入门

elementuiCascader级联选择器动态加载动态禁用入门实现效果当点击的根选项有子选项时,会向后台发送请求,并且接收数据实现动态加载。点击特殊选项时,可以禁用其他选项。相关代码el-cascader>propsprops:{//emitPath:false,//返回值只有valuemultiple:true,//多选模式lazy:true,// 是否动态加载子节点,需与lazyLoad方法结合使用lazyLoad:this.handleGetClassOrStudent,//懒加载调用的方法},==============================================

Element-UI的Upload 上传文件

1、Element-UI版本"element-ui":"^2.15.9"Upload上传官方文档2、一次只能上传一个文件2.1自动上传限制一次只能上传一个文件,并判断上传的文件大小及文件类型;自动上传:即选择文件后即开始校验,校验通过后调接口上传到服务器将文件拖到此处,或点击上传只能上传txt/zip/rar文件,且不超过10M,一次只能上传一个exportdefault{name:'upload-file',data(){return{};},methods:{//文件上传前对文件类型、文件大小判断限制beforeUpload(file){const{name,size}=file;cons

Element-ui Popconfirm气泡确认框的确认及取消事件不生效

Element-ui官方文档对Popconfirm气泡确认框的一些属性及事件的描述不够详细,导致第一次使用时会遇到各种各样的问题对确定事件及取消事件描述如下:但是如果给组件绑定@confirm="confirm"时,发现点击确定按钮时,并不能触发confirm事件.实际应该绑定的是onConfirm事件和onCancel事件删除

基于Element-ui 表单弹窗列表选择封装

不知道怎么描述这个东西了。。el-select下拉框大家都知道,但是下拉框只能选择一个,而且如果数据太多的话也不太容易选择,所以这里就是封装了组件包含对应的弹窗,就是能实现多选,而且列表也是分页展示的,选择完之后将对应的名称展示在文本框中,传给后端对应的用逗号隔开(用什么隔开都可以,跟后端商量)的id大致的效果图就是:  这个关联合同就是我们封装的,输入框添加了disabled,不可编辑的,只能通过点击右侧弹窗来进行选择。点击弹窗之后的效果图: 这里我们要考虑的就是:点击弹窗要展示出列表,进行选择,选择完之后点击确定要将对应的名称展示出来,多个就用逗号隔开,然后拿到对应id对应赋值。第二就是回

element-ui 设置table表头固定

设置包裹table组件的标签flex:1将table高度设为100%更改table默认滚动条统一设置样式,在App.vue添加样式: .el-table__body-wrapper::-webkit-scrollbar{ width:10px; height:10px; background-color:#ebeef5; } ::-webkit-scrollbar-thumb{ box-shadow:inset006pxrgba(0,0,0,.3); border-radius:10px; -webkit-box-shadow:inset006pxrgba(0,0,0,.3);