OpenAuth.net入門【7】——公共字典的單選下拉框使用

 接前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、最終效果

  

 

   

 

 

  下一篇預告:多選下拉框的使用

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章