一：读取表格数据
<div>
<div class="btnfile">
<el-button type="primary">选择文件</el-button>
<el-button type="primary" @click="upload(2)">开始上传</el-button>
</div>
<div class="inputfile">
<input
ref="fileInput"
class="input-file"
type="file"
accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
@change="exportData"
>
</div>
</div>
// 上传文件时处理方法
exportData(event) {
if (!event.target.files.length) return
this.target = event.target.value.substring(event.target.value.lastIndexOf('\\') + 1)
var f = event.currentTarget.files[0]
var reader = new FileReader()
var that = this
FileReader.prototype.readAsBinaryString = function(f) {
var binary = ''
var wb // 读取完成的数据
var outdata // 你需要的数据
var reader = new FileReader()
reader.onload = function(e) {
// 读取成Uint8Array，再转换为Unicode编码（Unicode占两个字节）
var bytes = new Uint8Array(reader.result)
var length = bytes.byteLength
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i])
}
// 接下来就是xlsx了，具体可看api
wb = XLSX.read(binary, {
type: 'binary',
cellDates: true
})
// 数据数组
outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
that.readTist = outdata //data{}定义的变量readTist赋值
outdata = []
event.target.value = ''
}
reader.readAsArrayBuffer(f)
}
reader.readAsBinaryString(f)
}
//开始上传
upload(val) {
this.exslsArrange(this.readTist)
},
// 导入表格数据处理
exslsArrange(outdata) {
this.selections = []
var that = this
if (outdata.length === 0) {
return this.$message.error('上传数据条数为空,请重新上传')
} else {
outdata.forEach(function(value, index) {
const obj = {
name: '',
mobile: '',
newMobile: ''
}
obj.name = value['会员账号'] ? value['会员账号'] : ''
obj.mobile = value['手机号 '] ? value['手机号 '] : ''
obj.newMobile = value['修改后跟进人手机号码'] ? value['修改后跟进人手机号码'] : ''
that.selections.push(obj)//最终数据！！！！！
that.progress = ((index + 1) / outdata.length) * 100
})
}
},
二：关于对象数组方法
1.对象的遍历方式
let num = 18
let person = {
name: 'xiecheng',
age: 34,
school: 'imooc',
}
//for in
for (let key in person) {
console.log(key, person[key])//key是属性名，obj[key]是属性值
}
console.log(object.keys(person)) //输出所有属性名的数组 : ['name','age','school']
object.defineProperty(person, 'sex',{//添加属性，加上配置项
value:'男',
enumerable:true,////控制属性是否可以枚举，默认值是false
writable: true,//控制属性是否可以被修改，默认值是false
configurable:true //控制属性是否可以被鹏除,默认值是false
))
console.log(object.keys(person)) //输出所有属性名的数组 : ['name','age','school']
2.对象添加属性，和删除属性
let obj = { name: 'xiecheng' }
this.$set(this.obj,"set", 24) //添加属性
this.$delete(data, name) //删除属性
3.判断两个对象是否相等Object.is(obj1,obj2)
let obj1 = { name: 'xiecheng', age: 34 }
let obj2 = { name: 'xiecheng', age: 34 }
console.log(obj1 == obj2) // false
console.log(Object.is(obj1, obj2)) // false
4.数组添加/删除元素
// 添加元素方法push()
let arr = []
this.arr.push(1,2) //结果输出:1，2
// 删除
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2); //从下标为2开始删除2个元素，结果输出:Banana,Orange
// 删除加插入
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi"); //从下标为2开始删除1个元素、添加两个元素，结果输出:Banana,Orange,Lemon,Kiwi,Mango
// 不删除插入
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi"); //从下标为2开始删除0个元素、添加两个元素，结果输出:Banana,Orange,Lemon,Kiwi,Apple,Mango
5.数组遍历
（1）forEach() 没有返回值，只是针对每个元素调用func
let arr = [{name: '云槿'，age: 21}, {name: 'yunjin'，age: 22}]
this.arr.forEach((item, index) => {
console.log(item, index);
})
(2)map()返回一个经过处理后的新数组，但不改变原数组的值。
var a = [1,2,3,4,5]
var b = a.map((item) => {
return item = item * 2
})
console.log(a) // [1,2,3,4,5]
console.log(b) // [2,4,6,8,10]
//js改变数组里的数据类型
let arr = ["21","122","3323"]
arr = arr.map(Number)
console.log(arr)
(3)filter()过滤器过滤方法
let selections = [{name: '云槿'，age: 21}, {name: ''，age: 22}]
const temArr = selections.filter(v => v.name !== '')
console.log(temArr) // 数组里是返回符合条件的对象：[{name: '云槿'，age: 21}]
<template>
<div>
<el-table>
<el-table-column label="导入时间" width="150px" align="center">
<template slot-scope="scope">{{ scope.row.insertTime | timeFormat }}</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import moment from 'moment'
export default {
filters: {
timeFormat(value) {
if (value <= 0) {
return ''
} else {
return moment(value).format('YYYY-MM-DD HH:mm:ss')
}
}
}
}
</script>
(4)some() 返回boolean，判断是否有元素符合func条件
let arr = [{name: '云槿'，age: 21}, {name: 'yunjin'，age: 22}]
let result = arr.some(val => val.name === '云槿')
console.log(result) //true
(5)every() 返回boolean，判断每个元素都符合func条件
let arr = [{name: '云槿'，age: 21}, {name: 'yunjin'，age: 22}]
let result = arr.every(val => val.name === '云槿')
console.log(result) //false
(6)find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。
findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
<template>
<div>
<el-table-column label="SKU名称" width="250px" align="center">
<template slot-scope="scope">
{{ arrName.find(v => v.id === scope.row.productId) ? arrName.find(v => v.id === scope.row.productId).name : '' }}
{{ arrName.findIndex(v => v.id === scope.row.productId) }}
</template>
</el-table-column>
</div>
</template>
<script>
export default {
data() {
return {
arrName: [{name: 'aaa',id: 111}, {name: 'bbb',id: 222}],
}
}
}
</script>
三：同时调用多个接口
async changeName(val) {
const p1 = new Promise((resolve, reject) => {
resolve(getAuditInfoDetail({ accountId: val }))
})
const p2 = new Promise((resolve, reject) => {
resolve(getSalesmanInfo({ accountId: val }))
})
const allField = await Promise.all([p1, p2])
const [res, resName] = allField
if (res.data && res.respCode === '0000') {
console.log(res);
}
if (resName.data && resName.respCode === '0000') {
console.log(resName);
}
},
四：同时验证两个element ui表单
element ui 表单验证触发方式：(trigger: 'change' -->数据改变时校验) /（trigger: 'blur' -->失去焦点时校验）
<template>
<!-- 测试详情页 -->
<div>
<div class="basic-info"> 待评分企业基本信息</div>
<!-- 表单一（ref="ruleForm"） -->
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="auto" style="width:1000px;">
<el-form-item label="企业名称" prop="companyName">
<el-input v-model.trim="ruleForm.companyName" placeholder="请输入企业名称"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model.trim="ruleForm.name" placeholder="请输入姓名"></el-input>
</el-form-item>
<el-form-item label="身份证号码" prop="idNumber">
<el-input v-model.trim="ruleForm.idNumber" placeholder="请输入身份证号码"></el-input>
</el-form-item>
<el-form-item label="手机号码" prop="phoneNumber">
<el-input v-model.trim="ruleForm.phoneNumber" placeholder="请输入手机号码"></el-input>
</el-form-item>
<el-form-item label="银行卡号" prop="bankCardNumber">
<el-input v-model.trim="ruleForm.bankCardNumber" placeholder="请输入银行卡号"></el-input>
</el-form-item>
</el-form>
<div v-if="isText" class="basic-info"> 请输入评分指标信息</div>
<!-- 表单二（ref="pan"） -->
<el-form :model="scoreCardTest" label-width="auto" style="width:1000px;" ref="pan">
<div v-for="(item,index) in scoreCardTest.list" :key="index">
<el-form-item :label="item.name" :prop="`list.${index}.value`"
:rules="{ required: true, message: `请输入${item.name}`, trigger: 'blur' }" v-if="item.dataType != 8">
<el-input :placeholder="'请输入'+item.tips" v-model="item.value"></el-input>
</el-form-item>
<el-form-item :label="item.name" :prop="`list.${index}.value`"
:rules="{ required: true, message: `请选择${item.name}`, trigger: 'chage' }" v-else>
<el-select v-model="item.value" style="width:280px;">
<el-option v-for="option in item.values" :key="option" :label="option" :value="option"> </el-option>
</el-select>
</el-form-item>
</div>
</el-form>
<div class="btn">
<el-button type="primary" :disabled = "!isText" @click="submitForm()">确认</el-button>
<el-button type="info" :disabled = "!isText" @click="resetForm('ruleForm')">重置</el-button>
<el-button @click="returnPrevious">返回</el-button>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
const isCardId = (rule, value, callback) => {
if (!value) {
return new Error("请输入身份证号)");
} else {
const reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
const card = reg.test(value);
if (!card) {
callback(new Error("身份证格式如:423024xxxx0216xxxx"));
} else {
callback();
}
}
}
return {
tacticsId: '',
scoreCardTest: {},
scoreCardList: [],
isText: false,
ruleForm: {
applyInfo: {},//申请信息表
companyName: '',//公司名称
name: '',//姓名
idNumber: '',//身份证
phoneNumber: '',//手机号码
bankCardNumber: '',//银行卡号
},
rules: {
companyName: [
{ required: true, message: '请输入企业名称或社会统一信用编码', trigger: 'blur' }
],
name: [
{ required: true, message: '请输入姓名', trigger: 'blur' }
],
idNumber: [
{ required: true, message: '请输入身份证号码', trigger: 'blur' },
{ validator: isCardId, trigger: 'blur' }
],
phoneNumber: [
{ required: true, message: '请输入手机号码', trigger: 'blur' }
],
bankCardNumber: [
{ required: true, message: '请输入银行卡号', trigger: 'blur' }
]
},
};
},
methods: {
//确认提交
async submitForm() {
try {
const formName = ['ruleForm', 'pan']
//定义函数validates
const validates = (item) => {
return new Promise((resolve, reject) => {
if (!this.$refs[item]) {
resolve()
return false
}
//validate是组件自己定义的函数，用于表单验证
this.$refs[item].validate((valid) => {
if (valid) {
resolve()
} else {
reject(new Error('验证不对'))
}
})
})
}
//循环调用表单验证函数
Promise.all(formName.map(item => validates(item))).then(() => {
this.submitFormByTacticsId()//表单验证成功调用
}).catch((e) => {
console.log(e)
})
} catch (error) {
console.log(error);
}
},
//重置
resetForm(formName) {
},
//提交接口
async submitFormByTacticsId() {
}
},
};
五、 vue+elementUI中使用formatter进行数据转换
// 列表column
<el-table-column label="性别" align="center" prop="cadreSex" :formatter="formatSex" />
// 性别数据转换
formatSex(row){
return row.cadreSex === 0 ? "男" : row.cadreSex === 1 ? "女" : "未填写";
},
