一、学习使用vue element-UI的省市区级联选择器
1.安装
代码如下:
npm install element-china-area-data -S
2.使用
代码如下(示例):
import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
3.注释
1.provinceAndCityData是省市二级联动数据(不带“全部”选项)
2.regionData是省市区三级联动数据(不带“全部”选项)
3.provinceAndCityDataPlus是省市区三级联动数据(带“全部”选项)
4.regionDataPlus是省市区三级联动数据(带“全部”选项)
“全部"选项绑定的value是空字符串”"
5.CodeToText是个大对象,属性是区域码,属性值是汉字 用法例如:CodeToText[‘110000’]输出北京市
6.TextToCode是个大对象,属性是汉字,属性值是区域码 用法例如:TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
4.效果图
4.页面使用
<el-form-item label="地址" prop="address">
<el-cascader v-model="ruleForm.address" :options="options" @change="handleChange"> </el-cascader>
</el-form-item>
5.js data中的数据
// 地址三级联动数据
options: regionDataPlus,
selectedOptions: [],
6.js中的方法
handleChange(value) {
console.log(value);
},
7.页面展示获取地址遇到问题:需要先判断当前表单是否必填,如果不是必填,先判断有没有选第三级,再判断第二级然后是第一级,如果都没有选择就返回空,否则获取到的是undefined
//获取省市地区新消息
//判断有没有第三级
if (CodeToText[info.address[2]]) {
obj.address = `${CodeToText[info.address[0]]} / ${
CodeToText[info.address[1]]
} / ${CodeToText[info.address[2]]}`;
//判断有没有第二级
} else if (CodeToText[info.address[1]]) {
obj.address = `${CodeToText[info.address[0]]} / ${
CodeToText[info.address[1]]
}`;
///判断有没有第一级
} else if(CodeToText[info.address[0]]){
obj.address = `${CodeToText[info.address[0]]} `;
}else{
obj.address = ''
}
二 .vue element-UI tabel表格\单元格中显示多行数据
1. HTML中直接获取,无需使用v-for
<el-table-column prop="name" label="姓名" width="180">
<template slot-scope="scope">
<div >{{ scope.row.name }}</div>
<div >{{ scope.row.idNumber }}</div>
<div >{{ scope.row.age }}</div>
</template>
</el-table-column>
三.在element-UI tabel 表格中展示可放大预览的图片
1.HTML中
<template slot-scope="scope">
<el-image
class="imgs"
lazy
style="width:40px;height:40px;"
v-for='(o,i) in scope.row.imgs'
:src="url"
:preview-src-list="previewImgs(o, scope.row.imgs)"
></el-image>
//imgs是一个数组,里面保存着多张图片
</template>
2.js data中
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
3.遇到问题:页面展示多张图片时点击哪一张都从第一张展示. 解决办法如下,使用方法返回一个处理过的新数组 (如果是只显示一张图片,无需使用该方法,直接:preview-src-list绑定一个数组就可以)
//preview-src-list是多图可左右翻页预览的属性,绑定展示的是一个数组
// 预览图片的返回方法
previewImgs(img, imgs) {
let index = imgs.indexOf(img);
let frontArr = imgs.slice(0, index);
let behindArr = imgs.slice(index, imgs.length);
let list = behindArr.concat(frontArr);
return list;
},