Element UI
Element UI 相关技术
dbt@L
这个作者很懒,什么都没留下…
展开
-
element-ui——安装element-plus
element-ui——安装element-plus原创 2022-07-31 09:18:32 · 1157 阅读 · 0 评论 -
element-ui——解决element-ui中table表格row-style改变当前行样式失效问题
element-ui——解决element-ui中table表格row-style改变当前行样式失效问题原创 2022-07-13 10:45:30 · 1398 阅读 · 0 评论 -
element-ui——设置element-ui 的菜单默认展开
element-ui——设置element-ui 的菜单默认展开原创 2022-07-13 10:41:17 · 1942 阅读 · 0 评论 -
element-ui——el-table表格组件出现选择一行而全选框也被打上勾的情况
解决方案:给row-key值绑定一个唯一值行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function。 <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="原创 2021-09-21 09:33:05 · 865 阅读 · 0 评论 -
element-ui——element-ui 中 表格是否显示表头
show-header属性为布尔值,true为显示/false为隐藏示例:<el-table :show-header="true"></el-table>原创 2021-08-30 14:15:09 · 844 阅读 · 0 评论 -
element-ui——element-ui级联选择器el-cascader清空所选内容
<el-cascader v-model="List"></el-cascader>data () {return {List: []}},清空方法this.form.List =[]原创 2021-08-30 14:19:04 · 1136 阅读 · 0 评论 -
element-ui ——element-ui 中使表格不能选中
手动添加一行 el-table-column,设 type属性为 selection即可如果此时绑定的selectable为true,则可选中,如为false, 则不可选中<el-table :show-header="true"><el-table-column :selectable="selectable" border type="selection" fixed width="55"></el-table-column> <el-table-col原创 2021-08-30 14:41:02 · 1129 阅读 · 0 评论 -
element-ui—— el-dialog: 让中间出现滚动条
/deep/ .el-dialog { height: 870px;}/deep/ .el-dialog__body { overflow-y: auto; height: 680px;}原创 2021-06-08 08:44:14 · 2198 阅读 · 0 评论 -
element-ui——预格式化的文本
<el-table-column type="expand"> <template slot-scope="scope"> <pre>{{ scope.row }}</pre> </template> </el-table-column>原创 2022-05-22 10:04:47 · 337 阅读 · 0 评论 -
element-ui——修改el-dialog样式自定义class
custom-class: Dialog 的自定义类名<el-dialog :visible.sync="dialogVisible" width="30%" custom-class="customClass" :before-close="handleClose"></el-dialog> /deep/.customClass { background: #09374c; }原创 2022-02-16 15:22:48 · 8758 阅读 · 0 评论 -
element-ui——el-carousel走马灯修改 Carousel 左右两侧箭头字体大小
/deep/.el-carousel__arrow i { font-size: 29px !important; }原创 2022-02-16 20:00:00 · 1850 阅读 · 4 评论 -
element-ui——el-upload 上传成功后清空文件
<el-upload action="#" ref="upload" list-type="picture" :show-file-list="true" :limit="1" :http-request="handleUpload"> <el-button size="small" type="primary">上传</el-button></el-upload><button @click="doClear"> 清空&.原创 2021-11-19 10:27:42 · 7103 阅读 · 0 评论 -
element-ui——el-radio使用for循环显示
<el-radio-group v-model="radioValue"> <el-radio v-for="item in list" :key="item.id" :label="item.value"> {{item.value}} </el-radio></el-radio-group>data () { return { radioValue: '', list: [{id.原创 2021-11-19 10:27:05 · 3648 阅读 · 0 评论 -
element-ui——Error in render: “TypeError: Cannot read properties of undefined (reading ‘length‘)“
reason: el-checkbox-group 没有绑定 v-modelsolution:<el-checkbox-group v-model="list"> <div style="display: flex;"> <el-checkbox v-for="(item, index) in reMarketingList" :key="index"原创 2021-11-19 10:22:57 · 3968 阅读 · 1 评论 -
element-ui——table默认选中第几行
<el-table :data="transformTableData" ref="transformTableData" > <el-table-column prop="name" label="名字"></el-table-column></el-table><button @click="myClick"> 选中第一行</button>// 选中第一行myClick () {this.$refs.t原创 2021-09-15 10:42:09 · 930 阅读 · 0 评论 -
element-ui——el-cascader-panel级联选择器中配置选项props 的使用
<div> <el-cascader-panel class="cascader" ref="leftList" @change="leftListClick" :options="options" :props="propsObj" ></el-cascader-panel> </div> data () { return { options: [{ name: 'a', id: 1 }, { name: .原创 2021-07-27 16:32:34 · 3725 阅读 · 0 评论 -
element-ui——自定义el-cascader级联选择器
使用 模板 template slot-scope="{ node, data }"<el-cascader :options="options"> <template slot-scope="{ node, data }"> <span>{{ data.label }}</span> <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>原创 2021-07-27 15:27:00 · 1576 阅读 · 0 评论 -
element-ui——重置表单
<el-form ref="ruleForm" ></el-form><button @click="reset">重置</button>reset() { this.$refs.ruleForm.resetFields();}原创 2021-07-23 15:11:09 · 513 阅读 · 0 评论 -
element-ui——解决el-table表格组件出现选择一行而全选框也被打上勾的问题
解决方案:给row-key值绑定一个唯一值行数据的 Key,用来优化 Table 的渲染;在使用 reserve-selection 功能与显示树形数据时,该属性是必填的。类型为 String 时,支持多层访问:user.info.id,但不支持 user.info[0].id,此种情况请使用 Function。 <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="原创 2021-07-23 15:03:19 · 1095 阅读 · 0 评论 -
element-ui——element-ui 自定义正则规则用法
<el-form :rules="rules" ref="ruleForm" ><el-form-item label="确认新密码" prop="confirm_new_password"></el-form-item></el-form>data () {var validatePass = (rule, value, callback) => {if (value === '') {callback(new Error('错误'))原创 2021-06-09 17:12:18 · 431 阅读 · 0 评论 -
element-ui —— element-ui el-cascader 级联选择器清除选中
<el-cascader v-model="value" :options="options" ref="cascader"></el-cascader>// 清空级联选择器选中状态this.$refs.cascader.$refs.panel.clearCheckedNodes()原创 2021-06-08 08:56:30 · 560 阅读 · 0 评论 -
element-ui——element-ui 问号提示组件的使用
<el-tooltip placement="right"> <div slot="content">非搜索标题以及文本摘要无法使用关键词</div> <i class="el-icon-question icon-color"></i> </el-tooltip>效果:...原创 2021-06-08 08:48:44 · 2001 阅读 · 0 评论 -
element-ui——el-table 组件设置滚动位置
1.设置table的ref为tableList2.设置滚动至顶部this.$refs.tableList.bodyWrapper.scrollTop =0;3.设置滚动至底部this.$refs.tableList.bodyWrapper.scrollTop =this.$refs.tableList.bodyWrapper. scrollHeight;原创 2021-06-08 08:43:13 · 1169 阅读 · 0 评论 -
element-ui —— element-ui 重置Form 表单
// 重置 resetClick () { this.$refs.ruleForm.resetFields() },原创 2021-06-08 08:44:46 · 390 阅读 · 0 评论 -
element-ui—— element-ui中的 el-select 实现远程搜索
<template> <div> <el-select v-model="inputValue" multiple collapse-tags filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loading" placeholder="请选择"> <el-option v-for="(item, index) in list" :k原创 2021-06-06 16:45:55 · 626 阅读 · 0 评论 -
element-ui——el-checkbox报错Cannot read property ‘length‘ of undefined
例子:<el-form-item label="标签一" prop="List"> <el-checkbox-group v-model="form.List"> <el-checkbox label="1">看电视</el-checkbox> </el-checkbox-group></el-form-item>data() { return { form: { L原创 2021-05-22 15:57:04 · 1034 阅读 · 0 评论 -
element-ui——表格的应用-选中一行时选中其对应的复选框
<el-table @row-click="clickRow" ref="myTable"> <el-table-column label="表格一"/></el-table><script> export default { methods: { clickRow(row){ this.$refs.myTable.toggleRowSelection(ro原创 2021-05-22 15:51:56 · 233 阅读 · 0 评论 -
element-ui—— el-upload 自定义上传文件显示列表及固定标签的添加
<template> <div> <el-upload class="avatar-uploader" ref="upload" :limit="10" multiple :on-exceed="handleExceed" :show-file-list="false" action="https://jsonplaceholder.typicode.com/posts/" :on-change="handlePreview" :file-l原创 2021-05-09 16:15:24 · 5085 阅读 · 0 评论 -
element-ui——element-ui 中的 el-select 实现远程搜索
<template> <div> <el-select v-model="inputValue" multiple collapse-tags filterable remote reserve-keyword :remote-method="remoteMethod" :loading="loading" placeholder="请选择"> <el-option v-for="(item, index) in list" :k原创 2021-05-09 10:57:31 · 791 阅读 · 0 评论 -
element-ui——element-ui中的el-select中 remote-method 远程搜索方法传入多个参数
使用箭头函数<el-select :remote-method="(query) => remoteSearchAdGroup(query, item.name)"placeholder="请选择账户名"><el-option ></el-option</el-select>原创 2021-05-09 10:58:28 · 3082 阅读 · 0 评论