Element基础入门

最新推荐文章于 2025-05-28 21:34:11 发布

原创最新推荐文章于 2025-05-28 21:34:11 发布 · 914 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#element

前端技术专栏收录该内容

4 篇文章

订阅专栏

使用公共枚举，例如显示性别（EnumGender表示显示性别，Ethnic表示名族，Political表示政治面貌）：
<el-table-column prop="sex" label="性别" min-width="100">
<template slot-scope="scope">
{{scope.row.sex|dictCodeToName('DICT','EnumGender')}}
</template>
</el-table-column>

枚举下拉框，使用字典类型（DICT）
   1、js必须先获取相应的字典数据
       //初始化下拉数据，用于页面不展示但是业务中需要对对应的类型格式化 DICT,ENUM
HjDict.initLocalData([{'dictSource': HjDict.DB.DICT, 'nameList': ['EnumCameraType']}]);
   2、<common-select v-model="insertCamera.ruleForm.cameraType" operator="DICT" name="EnumCameraType" showtext="摄像机类型"class="search-item-width"></common-select>

下拉列表：
   <el-select v-model="selectFrom.ruleForm.sex" clearable placeholder="请选择" class="search-item-width" >
<el-option
v-for="item in sexOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
在Vue中的data这样设置：
   sexOptions: [{
value: '1',
    label: '男'
   }, {
value: '2',
label: '女'
}]

分页方法：（handleCurrentChange是访问的方法）
<div class="pagination text-align-right">
<el-pagination
@current-change="handleCurrentChange"
layout="total,prev, pager, next,jumper"
:current-page.sync="table.page"
:page-size="table.pageSize"
:total="table.total">
</el-pagination>
</div>
在el-table中获取行信息使用scope.row；如：
<template slot-scope="scope">
<el-button type="primary" icon="el-icon-edit" size="mini" @click="updateStudent(scope.row)">修改</el-button>
<el-button type="info" icon="el-icon-delete" size="mini" @click="deleteStudent(scope.row)">删除</el-button>
</template>

动态生成多选框：
   方法1、   <template>
<el-checkbox v-for="user in platformUser" v-model="checkList" border>{{user.loginName}}</el-checkbox>
           </template>
方法2、   <template>
<div >
<el-checkbox-group v-model="checkList">
<el-checkbox v-for="user in platformUser" :label="user.loginName" border style="width: 185px;">{{user.loginName}}</el-checkbox>
</el-checkbox-group>
</div>
</template>

上传图片成功后删除图片：
   1、在上传图片的地方添加 ref="picUpload"
   2、在成功和取消的方法里添加 self.$refs.picUpload.clearFiles();

图片可放大：
           <template v-if="item !='' ">
<el-popover placement="right" title="" trigger="hover">
<img :src="item" style="width: 120px;height: 120px;"/>
<img slot="reference" :src="item" #*:alt=" "*# style="max-height: 500px;max-width: 500px">
</el-popover>
    </template>

表格中多选的禁止点击操作：
           在el-table-column中添加监听方法 :selectable='checkboxInit' 如下
           <el-table-column type="selection" width="55" :selectable='checkboxInit'></el-table-column>
           checkboxInit: function (row, index) {
               if (row.checkFlag !== 1) {
                   return 1;
               } else {
                   return 0;
               }
           }
table中多选获取值：
       页面：在el-table中添加监听方法@selection-change="handleSelectionChange"，如下
           <el-table ref="multipleTable" :data="addTable.tableData" border height="350" @selection-change="handleSelectionChange">
           在el-table中添加列
           <el-table-column type="selection" width="55" :selectable='checkboxInit'></el-table-column>
       方法：
           //多选获取值(选择状态改变后调用获取值)
           handleSelectionChange: function (val) {
               var self = this;
               self.tableSelection = val;
           }


输入框数值范围限制(50-100):
       data里：
           form: {
dialogVisible: false,
ruleForm: {
number: '',
},
rules: {
number: [
{validator: self.valueRangCheck, trigger: ['blur', 'change']},
{required: true, message: '该项为必填项', trigger: ['blur', 'change']}
]
}
}
       methods里
           valueRangCheck: function (rule, value, callback) {
               var self = this;
               self.valueRange(1, 200, value, callback);
           },