vue.js基于ElementUI封裝了CRUD的彈框組件

更新時(shí)間：2022年07月04日 11:17:41 作者：??OrzR3????

這篇文章主要介紹了vue.js基于ElementUI封裝了CRUD的彈框組件，問咋會(huì)給你圍繞主題展開詳細(xì)的內(nèi)容介紹，感興趣的小伙伴可以參考一下

前言

代碼寫得不好，為什么不封裝一下呢，如果用的是ElementUI框架，也可以在此基礎(chǔ)上進(jìn)行二次封裝。譬如說，這個(gè)用來對(duì)列表數(shù)據(jù)進(jìn)行增刪改查的彈框。

開始封裝

原本只是個(gè)小功能，但是別的模塊也需要用到。

我的想法就是，把彈框標(biāo)題，table表頭，必填字節(jié)，接口請(qǐng)求路徑，增刪改查CRUD，等等，放在一個(gè)json對(duì)象里面。通過父組件向子組件傳參的方式，展示不同內(nèi)容，調(diào)用不同的接口。

極大提高了代碼的復(fù)用性。

json對(duì)象如下所示

  // 示例：
    let example = {
      // 彈框標(biāo)題
      popTitle: "編輯主題",
      // table
      columnList: [
        {
          prop: "themeName",
          label: "主題名稱",
        },
        {
          prop: "themeDescribe",
          label: "主題描述",
        },
      ],
      // 必填的字段
      requiredKeys: ["themeName"],
      tableData: this.themeList,
      // 主鍵，默認(rèn)為id
      idKey: "id",
      // 刪除的參數(shù)名稱，默認(rèn)為ids
      deleteKey: "ids",
      // 批量的參數(shù)名稱，默認(rèn)為ids
      batchDeleteKey: "ids",
      // 接口請(qǐng)求路徑，增刪改查CRUD
      interfaceUrl: {
        add: "/target/addTheme",
        edit: "/target/updateTheme",
        delete: "/target/deleteTheme",
        // 批量刪除
        batchDelete: "/target/deleteTheme",
        list: "/target/themelist",
      },
    };

table表頭作為列表傳入，數(shù)據(jù)結(jié)構(gòu)如下

 columnList: [
    {
      prop: "themeName",
      label: "主題名稱",
    },
    {
      prop: "themeDescribe",
      label: "主題描述",
    },
],

在子組件中循環(huán)渲染出表頭

<el-table-column
  v-for="(item, index) in columnList"
  :key="index"
  :show-overflow-tooltip="item.showOverflowTooltip || true"
  :align="item.align || 'center'"
  :header-align="item.headerAlign || item.align || 'center'"
  :label="item.label"
  :width="item.width"
>
  <template slot-scope="scope">
    <span v-if="scope.row.statusBtn === false">{{ scope.row[item.prop] }}</span>
    <el-input
      v-else-if="scope.row.statusBtn === true"
      v-model="scope.row[item.prop]"
      size="mini"
    />
  </template>
</el-table-column>

在父組件中調(diào)用

<!-- 編輯主題的彈框 -->
<edit-table-modal
  ref="editTableModal"
  :visible.sync="editTableModal.show"
  :tableObject="themeTableObject"
  v-if="editTableModal.show"
  @ok="editTableFunction"
/>

到此這篇關(guān)于vue.js基于ElementUI封裝了CRUD的彈框組件的文章就介紹到這了,更多相關(guān) ElementUI封裝CRUD內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: