Element基础入门

使用公共枚举，例如显示性别（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);
            },