标签：springboot public ExcelProperty value Element 输入框 import com 下拉框
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;
}
}
标签：springboot,public,ExcelProperty,value,Element,输入框,import,com,下拉框 来源： https://www.cnblogs.com/HJZ114152/p/16407125.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。