随笔分类 - UI 框架
摘要：效果图 实现代码 <el-timeline> <el-timeline-item v-for="(activity, index) in orderData" :key="index" :icon="activity.icon" type="primary" :color="activity.col
阅读全文
摘要：## 使用 ConfigProvider 包裹住英文组件，或者包裹根目录 ```js import { ConfigProvider } from 'antd'; import zhCN from 'antd/locale/zh_CN'; `共 ${total} 条`} /> ``` - antd
阅读全文
摘要：```js // 设置菜单样式 .ant-menu,.ant-menu-sub,.ant-menu-inline{ color: var(--white); background-color: ${bgColor} !important; } // 设置子菜单展开样式 .ant-menu-subme
阅读全文
摘要：## Warning: Each child in a list should have a unique "key" prop. ![](https://img2023.cnblogs.com/blog/2833653/202307/2833653-20230727115854998-139705
阅读全文
摘要：> 可以使用插件，也可以使用源码 注意*：插件下面的第一个标签必须是 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
阅读全文
浙公网安备 33010602011771号