2021-03-22

一、学习使用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;
    },

4. 效果图

总结

以上就是今天在使用中的组件以及遇到的问题，简单介绍了该组件 的使用，和遇到问题后去百度和官方文档找到的问题解决办法.