随笔分类 - UI 框架 / Element UI
摘要：效果图 实现代码 <el-timeline> <el-timeline-item v-for="(activity, index) in orderData" :key="index" :icon="activity.icon" type="primary" :color="activity.col
阅读全文
摘要：> 可以使用插件，也可以使用源码 注意*：插件下面的第一个标签必须是 el-table 转载的是别人的文章，看底部，文章传送门，实测好用 ## 源码 ```js ``` ## 使用 ```js virtualList = renderData"> ... import VirtualScroll f
阅读全文
摘要：## template 代码 ```js ``` ## data 下拉数据： ```js batchList: { list: [], total: 0, pageNo: 1, pageSize: 100 }, ``` ## methods 方法： ```js import { uniqBy } f
阅读全文
摘要：## 代码 ```js methods: { // 获取行数 getRow(val) { let row = 0 val.split('\n').forEach(item => { if (item.length 0) { row += 1 //如果一行只有回车符就是行数增加一行 } else {
阅读全文
摘要：<el-table-column prop="cvRobotName" label="机器人" align="center" v-if="mode !== 2"> <template slot-scope="item"> <el-select v-model="tableData[scope.$in
阅读全文
摘要：判断是否有滚动条 // dom 元素 const dom = this.$refs.uploadTableRef?.bodyWrapper // 滚动到底部 if (dom?.scrollTop + dom?.clientHeight dom?.scrollHeight) { console.log
阅读全文
摘要：效果图 搜索前： 搜索后： 使用 安装插件 pinyin-match： npm install pinyin-match --save 下拉： <el-select v-model="form.robot" placeholder="机器人" @change="robotSearch" filter
阅读全文
摘要：预览图 实现的效果 1、选中最后一级，下拉框收缩 2、下拉框的每一行点击都可以选中 3、点击radio，也能实现选中最后一级，下拉框收缩 组件代码 <el-cascader ref="cascaderHandleRef" v-model="languageIds" class="width-260"
阅读全文
摘要：给每一个 table 加一个key值，必须使用 key 值，就算使用 v-if，v-else 也会相互影响 <el-table key="1"></el-table> <el-table key="2"></el-table>
阅读全文
摘要：样式 <el-upload class="upload-demo" action="/api/file/upload" :on-remove="handleRemove" multiple ref="uplpadFile" :limit="1" :on-exceed="handleExceed" :
阅读全文
摘要：效果图 回显 选择 provinces 是后台返回数据，处理完之后的tree的数据 cityData 是 select 回显的数组 checkedList 选中数据的key值 filterText 输入的数据 回显代码 <el-select v-model="formData.sendBlindAr
阅读全文
摘要：效果图 代码 <el-dialog :visible.sync="isShowGenerateVideo" width="500px" class="dialog-middle" center append-to-body> <div slot="title"> <div class="el-dia
阅读全文
摘要：Element 分页使用 pager-count 报错 错误原因：pager-count只要5~21之间的奇数 <el-pagination small layout="total, prev, pager, next" :pager-count="6" :page-size="pageData.p
阅读全文
摘要：使用 distinguishCancelAndClose 属性 关闭：close（关闭弹框） 取消：cacel（cancelButtonText） ESC：close（关闭弹框） Element.MessageBox.confirm('是否要离开？', '提示', { confirmButtonTe
阅读全文
摘要：引入 ElementUI ，单独引入文件的都能使用 import ElementUI from 'element-ui'; Element.MessageBox.confirm('是否要跳转段落?', '提示', { confirmButtonText: '是', cancelButtonText:
阅读全文
摘要：下拉多选 <template> <el-form> <el-form-item label="上级组织：" label-width="100px" prop="parent_id"> <el-select ref="treeSelect" v-model="form.parent_id" place
阅读全文
摘要：效果图 多个下拉，flex 均等分布，改变局部样式，不影响全局 代码 <el-row class="right-main-right"> <el-form :model="inputForm"> <el-form-item> <el-select v-model="inputForm.one" pl
阅读全文
摘要：template <el-pagination :current-page="pagerList.currentPage" :page-size="pagerList.pageSize" :total="pagerList.total" :page-sizes="[10, 20, 50, 100]"
阅读全文
摘要：效果图 使用插槽 slot="label" 实现，直接上代码。 <el-form-item prop="method"> <label slot="label"> 计 算 方 法： </label> <el-input v-model
阅读全文
摘要：为对应的 input 输入框添加 @keyup.enter.native 事件 只有在 input 中回车触发 <el-input placeholder="请输入内容" v-model="searchInput" @keyup.enter.native="handleKeyUp"></el-inp
阅读全文
