文章目录
介绍
本文主要介绍在使用element-ui中容易出现的各种问题,和作者使用element-ui的一些小技巧。这篇文章会根据作者实际情况不断更新。希望能解决大家使用过程中的一些问题,如果能提供一些好的技巧方法帮助优化,结构化代码,那就更好了。文中也会设计部分iview的组件,择优使用。
参考文献:element-ui官网, iview官网
form
input(输入框 包括:number,email,textarea…类型)
input type=“number”
可通过设置 v-model.number
设置数字输入项
<el-form-item label="数字">
<el-input :size="size ? size : 'mini'" v-model.number="Data.number"></el-input>
</el-form-item>
通过 v-model.number
可将数字字符串转换为数字 可配合表单验证用
input 标注
可通过
slot
插槽设置表单的标注,适合表单的单位等
<el-form-item label="判读面积" prop="miaN_JI">
<el-input : v-model.number="data.miaN_JI">
<template slot="append">hm <sup>2</sup></template>
</el-input>
</el-form-item>
效果图:
可以根据 slot
属性更换标注位置
转至目录
select(下拉列表)
可通过
select v-model
设置code值,不用担心中文名
el-option
标签设置值
*******
注意 1v-model
不能设置为undefined
否则将不能正常显示值*********
*******
注意 2v-model
的值类型,数字 和 数字型字符串 错误或者不能对应将不能展示设置的值
<el-form-item label="省(区、市)">
<el-select
v-model="data.sheng"
filterable
placeholder="请选择省份"
>
<el-option
v-for="item in shengOpt"
:key="item.id"
:label="item.c_ZQNAME"
:value="item.c_ZQCODE"
>
</el-option>
</el-select>
</el-form-item>
/**********************************************/
shengOpt:[
{
c_ZQNAME:"辽宁省",
.c_ZQCODE:"001"
},
{
c_ZQNAME:"河南省",
.c_ZQCODE:"002"
},
{
c_ZQNAME:"四川省",
.c_ZQCODE:"003"
},
{
c_ZQNAME:"安徽省",
.c_ZQCODE:"004"
},
{
c_ZQNAME:"云南省",
.c_ZQCODE:"005"
},
{
c_ZQNAME:"内蒙古自治区",
.c_ZQCODE:"006"
},
]
效果图:
可以设置data.sheng = "001"
element-ui 可自动设置为辽宁省
转至目录
upload(文件上传)
table
用于动态表格,例如,表格表头不确定,需要从后端动态展示不同表头。
表头数据:displayTable类似:{dataitme:name,dataName:名字…}
<el-table
:data="tableData"
ref="multipleTable"
tooltip-effect="dark"
style="width: 100%;height:35vh"
@selection-change='handleSelectionChange'>
<el-table-column type="selection" width="45px"></el-table-column>
<template v-for='(col) in displayTable'>
<el-table-column
sortable
:show-overflow-tooltip="true"
:prop="col.dataItem"
:label="col.dataName"
:key="col.dataItem"
align="center"
>
</el-table-column>
</template>
</el-table>