element-ui el-select el-input el-table el-form使用說明和問題集

介紹

本文主要介紹在使用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標籤設置值
*******注意 1 v-model 不能設置爲undefined 否則將不能正常顯示值 *********
*******注意 2 v-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

轉至目錄