Element ui &多选框、输入框、下拉框、开关、上传文件

ElementUI多选框

Checkbox

使用

  <el-checkbox v-model="checked">备选项</el-checkbox>

<template>
    <div>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <div style="margin: 15px 0;"></div>
        <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
        </el-checkbox-group>
    </div>
</template>

<script>
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
        data() {
            return {
                checkAll: false,
                checkedCities: ['上海', '北京'],
                cities: cityOptions,
                isIndeterminate: true
            };
        },
        methods: {
            handleCheckAllChange(val) {
                this.checkedCities = val ? cityOptions : [];
                this.isIndeterminate = false;
            },
            handleCheckedCitiesChange(value) {
                let checkedCount = value.length;
                this.checkAll = checkedCount === this.cities.length;
                this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
            }
        }
    };
</script>

<style scoped>

</style>

ElementUI输入框

受控组件：只能用v-model绑定

size属性修改输入框的大小：修改的是高度

large/medium/small/mini

修改宽度可以在外层套一个div，通过修改div的宽度来修改输入框的宽度

show-password是一个可以切换显示效果的密码框

通过prefix-icon、suffix-icon来设置首尾的图标

maxlength来设置最大长度

minlength来设置最小长度

show-word-limit显示输入的长度

<template>
    <div>
           <el-input v-model="input" placeholder="请输入内容" maxlength="20" show-word-limit></el-input>
        <el-button type="primary" @click="click">按钮</el-button>
    </div>
</template>

<script>
    const cityOptions = ['上海', '北京', '广州', '深圳'];
    export default {
        data() {
            return {
                input:''
            };
        },
        methods: {
            click(){
                this.input='abc'
            }
        }
    };
</script>

<style scoped>

</style>

ElementUI下拉框

el-select和el-option

:disabled="true"

<template>
    <div>
        <el-select v-model="value" placeholder="请选择">
            <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
            </el-option>
        </el-select>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                options: [{
                    value: '选项1',
                    label: '黄金糕'
                }, {
                    value: '选项2',
                    label: '双皮奶'
                }, {
                    value: '选项3',
                    label: '蚵仔煎'
                }, {
                    value: '选项4',
                    label: '龙须面'
                }, {
                    value: '选项5',
                    label: '北京烤鸭'
                }],
                value: ''
            }
        }
    }
</script>

<style scoped>

</style>

ElementUI开关

Switch组件：两种相互对立状态的切换

el-switch

v-model来数据绑定

Boolean来表示开关

active-color:与inactive-colorl来设置开关的颜色

active-text和inactive-text设置开关对应的文本

change事件开关时触发该时间

<el-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
</el-switch>

<script>
  export default {
    data() {
      return {
        value: true
      }
    }
  };
</script>

ElementUI上传文件

前段

el-upload

<el-upload
  class="upload-demo"
  drag
  action="https://jsonplaceholder.typicode.com/posts/"
  multiple>
  <i class="el-icon-upload"></i>
  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

后端

springboot+EasyExcel完成后端数据的解析

1.pom.xml 中导入easyExcel的依赖

<!--        easyEecel-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.2.6</version>
        </dependency>

2.创建一个类来映射Excel文件

package com.southwind.springboot.entity;

import com.alibaba.excel.annotation.ExcelProperty;
import lombok.Data;

@Data
public class test {
    @ExcelProperty("编号")
    private Integer id;
    @ExcelProperty("姓名")
    private String name;
    @ExcelProperty("性别")
    private String gender;
    @ExcelProperty("年龄")
    private Integer age;
    @ExcelProperty("班级")
    private String classes;
}

3.创建一个ExcelService，实现数据解析

接口：

package com.southwind.springboot.service;

import com.southwind.springboot.entity.Test;

import java.io.InputStream;
import java.util.List;

public interface ExcelService {
    public List<Test> list(InputStream inputStream);
}

实现：

package com.southwind.springboot.service.impl;

import com.alibaba.excel.EasyExcel;
import com.alibaba.excel.context.AnalysisContext;
import com.alibaba.excel.event.AnalysisEventListener;
import com.southwind.springboot.entity.Test;
import com.southwind.springboot.service.ExcelService;
import org.springframework.stereotype.Service;

import java.io.InputStream;
import java.util.ArrayList;
import java.util.List;
@Service
public class ExcelServiceImpl  implements ExcelService {

    @Override
    public List<Test> list(InputStream inputStream) {
        List<Test> list=new ArrayList<>();
        EasyExcel.read(inputStream)
                .head(Test.class)
                .sheet()
                .registerReadListener(new AnalysisEventListener<Test>() {
                    @Override
                    public void invoke(Test test, AnalysisContext analysisContext) {
                    list.add(test);
                    }

                    @Override
                    public void doAfterAllAnalysed(AnalysisContext analysisContext) {
                        System.out.println("数据解析完成");
                    }
                }).doRead();
        return list;
    }

}