element 2.x组件

https://www.cnblogs.com/qq1445496485/p/14637087.html
一、下拉选择框
1.后端页面显示

<el-table-column label="纠纷类型" align="center" prop="disputeType" width="120">
   <template slot-scope="scope">
     <dict-tag :options="dict.type.biz_dispute_type" :value="scope.row.disputeType"/>
   </template>
 </el-table-column>

2.下拉框

<el-select v-model="form.disputeType" placeholder="请选择纠纷类型" clearable :style="{width: '100%'}">
   <el-option
     v-for="dict in dict.type.biz_dispute_type"
     :key="dict.value"
     :label="dict.label"
     :value="dict.value"
   ></el-option>
 </el-select>

3.引入字典类型数据

dicts: ['biz_dispute_type']

4.下拉查询

<el-select v-model="queryParams.category" placeholder="请选择工作类型" clearable>
  <el-option
    v-for="dict in dict.type.biz_job_category"
    :key="dict.value"
    :label="dict.label"
    :value="dict.value"
  />
</el-select>

5.详情，下拉框字典数据回显

{{ genderFormat(form) }}

genderFormat(row) {
  return this.selectDictLabel(this.dict.type.sys_user_sex, row.gender);
},

6.下拉框多选

#对应字段定义 reset()方法
detectType: null, 修改为--->detectType: [],
#属性
multiple
#修改
if (this.form.detectType) {
  this.form.detectType = this.form.detectType.split(",");
}
#提交
this.form.detectType = this.form.detectType.join(",");
#列表显示
<template slot-scope="scope">
  <dict-tag :options="dict.type.biz_detect_type" :value="scope.row.detectType ? scope.row.detectType.split(',') : []"/>
</template>
#详情页面显示
{{ form.detectType }}
# handleView()方法
if (this.form.detectType) {
  let detectArr = this.form.detectType ? this.form.detectType.split(',') : [];
  for (let item in detectArr) {
    if (detectArr[item] == '1') {
      detectArr[item] = '尿液检测'
    } else {
      detectArr[item] = '毛发检测'
    }
  }
  this.form.detectType = detectArr.join(",");
}

二、省市级三级联动
1.安装

npm install element-china-area-data -S

2.导入省市区(县)数据

import { regionData, CodeToText, TextToCode } from 'element-china-area-data';

regionData是省市区三级联动数据（不带“全部”选项）
CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText[‘110000’]输出北京市
extToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode[‘北京市’].code输出110000,TextToCode[‘北京市’][‘市辖区’].code输出110100,TextToCode[‘北京市’][‘市辖区’][‘朝阳区’].code输出110105
3.使用步骤
1】el-cascader 级联选择器

<el-cascader
	size="large"
	:options="options"
	v-model="selectedOptions"
	@change="handleChange"
	:filterable="true"
	clearable
	:style="{width: '100%'}">
</el-cascader>

2】定义存储数据的数组

// 省市区三级联动数据
options: regionData,
// 省市区代码数组
selectedOptions: [],

3】点击触发事件

handleChange(value) {
  this.getCodeToText(null, value);
  this.form.area = this.getCodeToText(null, value);
}

4】CodeToText的使用

getCodeToText(codeStr, codeArray) {
  if (null === codeStr && null === codeArray) {
	return null;
  } else if (null === codeArray) {
	codeArray = codeStr.split(",");
  }
  let area = "";
  switch (codeArray.length) {
	case 1:
	  area += CodeToText[codeArray[0]];
	  break;
	case 2:
	  area += CodeToText[codeArray[0]] + "/" + CodeToText[codeArray[1]];
	  break;
	case 3:
	  area +=
		CodeToText[codeArray[0]] +
		"/" +
		CodeToText[codeArray[1]] +
		"/" +
		CodeToText[codeArray[2]];
	  break;
	default:
	  break;
  }
  return area;
}

5】提交，该字段数组转字符串

this.form.area = this.selectedOptions.join(',');

6】修改，若该字段不为空，字符串转数组

if (this.form.area) {
  this.selectedOptions = this.form.area.split(',');
}

7】若该字段不为空时，getList()方法，给该字段遍历赋值

  this.residentCardList.forEach(item => {
	item.area = this.getCodeToText(item.area, item.area.split(','));
  })

8】详情页面显示

{{ this.selectedOptions }}
// handleView()方法
if (this.form.nativePlace) {
   this.selectedOptions = this.getCodeToText(null, this.form.nativePlace.split(','));
 }

扩展

this.form.area = TextToCode[this.getCodeToText(null, value).split('/')[0]][this.getCodeToText(null, value).split('/')[1]][this.getCodeToText(null, value).split('/')[2]].code

三、引入部门信息

 // 单位树选项
 deptOptions: undefined,
 // 引入相关文件
 // 第一种（before）
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
第二种，treeselec方法废弃，使用deptTreeSelect方法，用法一样
import {deptTreeSelect} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

 components: {Treeselect},

<treeselect v-model="form.checkUnit" :options="deptOptions" :show-count="true" placeholder="请选择审核人所属单位"/>


/** 查询部门下拉树结构 */
getTreeSelect() {
  treeselect().then(response => {
    this.deptOptions = response.data;
  });
}
/** 第二种 */
/** 查询部门下拉树结构 */
getTreeSelect() {
  deptTreeSelect().then(response => {
    this.deptOptions = response.data;
  });
}
// 调用方法
created() {
  this.getList();
  this.getTreeSelect();
},

详情操作，部门信息回显（before）

 // list结构
 resultList: [],
 
{{ checkUnitFormat(form) }}

created() {
  this.getList();
  this.unitTrans();
},

// 通过id显示单位名称
unitTrans() {
  treeselect().then(response => {
    const results = response.data;
    this.resultList = this.treeConvertList(results);
  });
},
// 树形结构转换为list
treeConvertList(tree) {
  let treeList = [];
  this.handleTreeList(tree, treeList);
  return treeList
},
handleTreeList(tree, treeList) {
  if (!tree || !tree.length) {
    return
  }
  for (let i = 0; i < tree.length; i++) {
    let currentRow = tree[i];
    let newRow = JSON.parse(JSON.stringify(currentRow));
    treeList.push(newRow);
    this.handleTreeList(currentRow.children, treeList)
  }
},

checkUnitFormat(row) {
  return this.selectOptionsLabel(this.resultList, row.checkUnit)
},
selectOptionsLabel(datas, id) {
  var actions = [];
  Object.keys(datas).some((key) => {
    if (datas[key].id == ('' + id)) {
      actions.push(datas[key].label);
      return true;
    }
  })
  return actions.join('');
}

详情部门名称回显（now）

if (this.form.collectOrgan) {
  getDept(this.form.collectOrgan).then(response => {
    this.form.collectOrgan = response.data.deptName;
  });
}

四、动态表格，通过点击事件实现增加、删除行
1.el-table表格

<el-row>
  <el-col :span="24">
    <el-form-item label="家庭成员">
      <el-button type="primary" size="mini" @click="handleRelation()" icon="el-icon-plus"></el-button>
    </el-form-item>
  </el-col>
</el-row>

<el-row>
  <el-table :data="relationArr" border :header-cell-style="{background:'#f5f5f5',color:'#606266'}">
    <el-table-column align="center" label="姓名" width="150">
      <template slot-scope="scope">
        <el-input v-model="scope.row.nameCn" placeholder="姓名"></el-input>
      </template>
    </el-table-column>

    <el-table-column align="center" label="性别" width="80">
      <template slot-scope="scope">
        <el-input v-model="scope.row.gender" placeholder="性别"></el-input>
      </template>
    </el-table-column>
    <el-table-column align="center" label="关系" width="100">
      <template slot-scope="scope">
        <el-input v-model="scope.row.relation" placeholder="关系"></el-input>
      </template>
    </el-table-column>

    <el-table-column align="center" label="身份证" width="210">
      <template slot-scope="scope">
        <el-input v-model="scope.row.idCard" placeholder="身份证"></el-input>
      </template>
    </el-table-column>

    <el-table-column align="center" label="手机">
      <template slot-scope="scope">
        <el-input v-model="scope.row.mobile" placeholder="手机"></el-input>
      </template>
    </el-table-column>

    <el-table-column align="center" width="65" label="操作">
      <template slot-scope="scope">
        <el-button type="danger" icon="el-icon-delete" @click="handleDel(scope.$index)"
                   size="small"></el-button>
      </template>
    </el-table-column>
  </el-table>
</el-row>

2.存储家庭成员数据数组

 // 家庭成员
 relationArr: [],

3.点击+号，新增一行，点击删除，删掉一行

handleRelation() {
   this.relationArr.push({});
 },
 handleDel(index) {
   this.relationArr.splice(this.relationArr.indexOf(index), 1)
 }   

4.提交，将JSON格式数据转换为字符串

this.form.family = JSON.stringify(this.relationArr);

5.修改，将字符串转换为JSON格式数据

if (this.form.family) {
  this.relationArr = JSON.parse(this.form.family)
}

五、导入表格
1.导入按钮

<el-col :span="1.5">
  <el-button
    type="info"
    plain
    icon="el-icon-upload2"
    size="mini"
    @click="handleImport"
    v-hasPermi="['system:user:import']"
  >导入</el-button>
</el-col>

2.导入功能实现

/** 导入按钮操作 */
handleImport() {
  this.upload.title = "用户导入";
  this.upload.open = true;
},
/** 下载模板操作 */
importTemplate() {
  this.download('system/user/importTemplate', {
  }, `user_template_${new Date().getTime()}.xlsx`)
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
  this.upload.isUploading = true;
},
// 文件上传成功处理
handleFileSuccess(response, file, fileList) {
  this.upload.open = false;
  this.upload.isUploading = false;
  this.$refs.upload.clearFiles();
  this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  this.getList();
},
// 提交上传文件
submitFileForm() {
  this.$refs.upload.submit();
}

3.定义相关参数

import { getToken } from "@/utils/auth";

// 用户导入参数
upload: {
  // 是否显示弹出层（用户导入）
  open: false,
  // 弹出层标题（用户导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: process.env.VUE_APP_BASE_API + "/system/user/importData"
}

六、其他组件
1】分割线

// 样式1：
<el-divider><H3 class="divider-model">审核信息</H3></el-divider>

.divider-model {
  font-size: 17px;
  font-family: 华文宋体;
  font-weight: 700;
  letter-spacing: 2px;
}

// 样式2：
<div style="margin: 20px 0px 40px 0px;">
  <el-divider><span class="divider-model">审核信息</span></el-divider>
</div>

.divider-model {
  color: #303133;
  font-size: 17px;
  font-family: DengXian;
  font-weight: bold;
  letter-spacing: 2px;
}

2】电话号码格式校验

{required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的联系电话", trigger: "blur"}

3】v-if用法

v-if="judgeState(form.recoverType,/[125]/)"
---------------------
judgeState(state = '', reg) {
  return !!String(state).match(reg)
},

4】placeholder动态显示不同的提示内容

:placeholder="showFatherCard"
-------------------------
computed: {
  showFatherCard() {
    return this.form.fatherCardType == '1' ? "请输入港澳同胞回乡证号码" : (this.form.motherCardType == '2'
      ? "请输入身份证号码" : "请输入护照号码")
  }
}

5】显示宽度设置

#设置宽度100%样式属性
:style="{width: '100%'}"
#过长省略，鼠标触碰显示
:show-overflow-tooltip="true"
#右浮动，如字段过多，操作右浮动
fixed="right"

6】日期样式设置未年月日 时分秒

//实体类
 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
 @Excel(name = "发生时间", width = 30, dateFormat = "yyyy-MM-dd HH:mm:ss")
// 显示
<template slot-scope="scope">
  <span>{{ parseTime(scope.row.accomTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
</template>
// 选择
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"

7】输入框只输入数字

<el-input v-model="form.limitNum" oninput="value=value.replace(/[^\d.]/g,'')" placeholder="请输入包厢数量" />
或者
<el-input-number v-model="form.limitNum" controls-position="right" :min="0" :style="{width: '100%'}"/>

8】el-table基础表格，去掉边框

.info-report-rank >>> .el-table__row>td{
  /* 去除表格线 */
  border: none;
}

.info-report-rank >>> .el-table th.is-leaf {
  /* 去除上边框 */
  border: none;
}

.info-report-rank >>> .el-table::before{
  /* 去除下边框 */
  height: 0;
}

9】富文本回显

<template slot-scope="scope">
   <div v-html="scope.row.warningContent" style="height:auto;"></div>
 </template>

10】设置只读模式
input使用:readonly=“true”，下拉框和树形选择框使用disabled，设置样式属性

:readonly="true"
disabled

<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  background: #ffffff;
  color: #606266;
}

::v-deep .vue-treeselect__control {
  background: #ffffff;
}

::v-deep .vue-treeselect__single-value {
  color: #606266;
}
</style>

11】el-switch开关

<el-switch v-model="form.remindOr" active-color="#13ce66" inactive-color="#f0cf5c" active-value="Y" inactive-value="N"></el-switch>

<image-preview :src="form.identityCard" style="width: 200px; height: 200px;"></image-preview>

12】java随机生成编号

# 随机生成字母（a-z、A-Z）
RandomStringUtils.randomAlphabetic(12)

# 随机生成字母（a-z、A-Z）和数字（0-9）
RandomStringUtils.randomAlphanumeric(12)

#时间（年月日时分秒）和数字
DateUtils.dateTimeNow().concat(RandomStringUtils.randomNumeric(4))

13】父组件向子组件跳转，两个方面：
父组件
（1）页面跳转，携带一个参数

this.$router.push('/drugs/seizure/' + wid);

（2）携带多个参数

this.$router.push({
  name: 'treatIndex',
  params: {
    populWid: this.populWid,
    controlStatus: controlStatus
  }
});

子组件接收参数

const wid = this.$route.params && this.$route.params.wid;

路由注册子组件

{
    path: '/drugs',
    component: Layout,
    hidden: true,
    children: [
      {
        path: 'seizure/:wid(\\d+)',
        component: () => import('@/views/poison/popul/seizure/index'),
        name: 'seizureIndex',
        meta: { title: '吸毒查获详情', icon: 'user' }
      }
    ]
  },

14】父组件引用子组件，父组件传递参数给子组件

#父组件传递
<PrisonType :startCycle="startCycle"></PrisonType>
startCycle: '1'

#子组件接收参数
<div :startCycle="startCycle"></div>
 export default {
    name: "PrisonType",
    props: {
      startCycle: String
    }
    .........
}

15】获取某日第二天，一年后

  data() {
    return {
      // 指定某天
      reportDate: '2016-02-28',
      nextDay: '',
      firstYear: ''
    }
  },
------------------赋值，调用对应方法---------------
// 获取第二天
this.nextDay = this.getSecondDay(new Date(this.reportDate));
console.log("************第二日：", this.nextDay)

// 获取一年后
this.firstYear = this.getFirstYear(new Date(this.reportDate));
console.log("************一年后：", this.firstYear)

------------------对应方法---------------
// 获取第二天日期
getSecondDay(dateTime) {
  const next = new Date(dateTime.setDate(dateTime.getDate() + 1));
  return this.convertFormat(next);
},

// 获取一年后日期
getFirstYear(dateTime) {
  const second = new Date(this.convertFormat(new Date(dateTime.setFullYear(dateTime.getFullYear() + 1))));
  const before = new Date(second.setDate(second.getDate() - 1));
  return this.convertFormat(before);
},

// 中国标准时间转换为年月日
convertFormat(dateTime) {
  return dateTime.getFullYear() + "-" + (dateTime.getMonth() + 1) + "-" + dateTime.getDate();
}

16】附件下载

/** 文件下载操作 */
handleDownload(row) {
  const filename = row.annex
  let list = filename.split("/");
  let element = list[list.length - 1];
  let params = {
	resource: filename
  }
  download('/common/download/resource', params, element);
}

17】打印功能

#1.添加按钮
<el-button type="primary" @click="handlePrint">打印</el-button>
#2.调用此方法
handlePrint() {
  this.$print(this.$refs.formView)
}
#3.定义formView，弹出框
<el-dialog ref="formView" ...>
</el-dialog>