接前6篇
OpenAuth.net入門【1】——代碼生成過程記錄 - 星星c# - 博客園 (cnblogs.com)
OpenAuth.net入門【2】——代碼生成後補全編輯功能 - 星星c# - 博客園 (cnblogs.com)
OpenAuth.net入門【3】——代碼生成後補全查詢功能 - 星星c# - 博客園 (cnblogs.com)
OpenAuth.net入門【4】——自定義數據列表和編輯界面 - 星星c# - 博客園 (cnblogs.com)
OpenAuth.net入門【5】——解決添加完數據,在未刷新列表時執行刪除,數據未被真正刪除的問題 - 星星c# - 博客園 (cnblogs.com)
OpenAuth.net入門【6】——添加數據校驗功能 - 星星c# - 博客園 (cnblogs.com)
目的:
前幾章裏用到了一個字段叫“設備聯網方式”,使用的是文本存儲的,文本存儲有個問題,就是錄入的信息不規範,不方便進行分組統計,所以想改成下拉框的形式來實現。
思路:
1、根據字典類型取出來所有的字典值列表
2、綁定到控件上
3、利用v-model對實際數據進行綁定顯示
4、在列表上對列值的顯示進行處理
步驟:
1、添加字典
打開“字典分類”菜單,如下圖:
根據下圖指示,添加字典類別,錄入後點確定按鈕即可完成類別輸入:
錄入完後,點擊即可錄入子項,如下圖:
錄完後的效果如下:
2、前臺讀取字典值
(1)引入數據源地址
在vue前端代碼裏引用,import * as categorys from "@/api/categorys"; 如下圖:
import * as categorys from "@/api/categorys";
(2)添加變量,然後賦值
在data里加上變量InternetType: []用來存儲讀取到的字典的數據,如下圖:
在created事件裏添加調用,我這裏爲了方便就直接添加到了getList方法裏,如下圖:
備註:TypeId: "InternetType" 此處填寫是字典分類的ID
代碼如下:
getList() { const listQuery = { page: 1, limit: 9999, TypeId: "InternetType", }; categorys.getList(listQuery).then((res) => { this.InternetType = res.data; this.listLoading = true; farmInternetDeviceTypeMsts.getList(this.listQuery).then((response) => { this.list = response.data; response.columnFields.forEach((item) => { // 首字母小寫 item.columnName = item.columnName.substring(0, 1).toLowerCase() + item.columnName.substring(1); }); this.headerList = response.columnFields; this.total = response.count; this.listLoading = false; }); }); },
3、下拉框數據綁定
在表單表體裏添加一個:el-form-item,並把上一步取到的值綁定上去,代碼如下:
<el-form-item size="small" :label="'設備聯網方式'" prop="internetType" > <el-select allow-create clearable> <el-option v-for="(item, index) in InternetType" :key="index" :value="item['id']" :label="item['name']" ></el-option> </el-select> </el-form-item>
4、跟數據實體建立對應關係
添加上v-model屬性,如下:
<el-form-item size="small" :label="'設備聯網方式'" prop="internetType" > <el-select allow-create clearable v-model="temp.internetType"> <el-option v-for="(item, index) in InternetType" :key="index" :value="item['id']" :label="item['name']" ></el-option> </el-select> </el-form-item>
5、在列表上顯示名稱
由於數據庫裏存的是ID,但顯示的時候,需要顯示名稱,所以需要在數據列表上進行處理,代碼如下:
<el-table-column align="center" min-width="50px" :label="'設備聯網方式'" > <template slot-scope="scope"> <span>{{ InternetType.find((u) => u.id == scope.row.internetType).name }}</span> </template> </el-table-column>
上面的代碼是,從InternetType變量根據id取出來名稱,然後進行友好化顯示。
6、最終效果
下一篇預告:多選下拉框的使用