本文主要介紹了element的el-form和el-table嵌套使用實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、element的el-form和el-table嵌套使用

要點(diǎn)：

:model="addJsonForm" 給表單綁定數(shù)據(jù)，addJsonForm 是傳入表單的數(shù)據(jù)對(duì)象
注意表單數(shù)據(jù)對(duì)象 addJsonForm 的定義：屬性 params （可按需求命名）為表單內(nèi)嵌套的表格的顯示數(shù)據(jù)，數(shù)組類型；屬性 addJsonRules ，為表單綁定的驗(yàn)證規(guī)則。
el-table：采用自定義列模板，可自定義表頭， el-form：表單項(xiàng)綁定對(duì)應(yīng)的字段名和校驗(yàn)規(guī)則
:prop="'params.' + scope.$index + '.name'" 綁定傳入Form 組件的 model 中對(duì)應(yīng)的字段 name
:rules="addJsonForm.addJsonRules.name" 綁定表單驗(yàn)證規(guī)則

<template>
  <div>
    <el-form
      :model="addJsonForm"
      ref="addJsonForm"
      :rules="addJsonForm.addJsonRules"
      :inline="true"
      label-width="108px"
    >
      <el-table :data="addJsonForm.params" style="width: 100%" border>
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>

        <el-table-column align="center">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">成員名稱</span>
            <i style="color:#F56C6C;">*</i>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="'params.' + scope.$index + '.name'"
              :rules="addJsonForm.addJsonRules.name"
            >
              <el-input
                type="text"
                v-model="scope.row.name"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column align="center">
          <template slot="header" slot-scope="scope">
            <span style="color:#2d65dc;">成員值</span>
            <i style="color:#F56C6C;">*</i>
          </template>
          <template slot-scope="scope">
            <el-form-item
              :prop="'params.' + scope.$index + '.value'"
              :rules="addJsonForm.addJsonRules.value"
            >
              <el-input
                type="text"
                v-model="scope.row.value"
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      addJsonForm: {
        params: [
          {
            name: "",
            value: ""
          }
        ],
        addJsonRules: {
          name: [
            { required: true, message: "請(qǐng)輸入成員名稱", trigger: "blur" }
          ],
          value: [
            { required: true, message: "成員值不能為空", trigger: "blur" }
          ]
        }
      }
    };
  }
};
</script>

二、應(yīng)用實(shí)例

點(diǎn)擊添加的時(shí)候，動(dòng)態(tài)增加表格的行數(shù)，點(diǎn)擊刪除的時(shí)候，刪除表格的行數(shù)據(jù)。

近期更新：因評(píng)論區(qū)問到后續(xù)如何用 Form 表單的 resetFields 方法，這里就新加一個(gè)重置功能。

<template>
  <div>
    <el-button @click="showPopup">點(diǎn)擊顯示彈框</el-button>
    <h3>
      dataSourceJson： <span>{{ FormInAddPopup.dataSourceJson }}</span>
    </h3>
    <el-dialog
      class="comn_dialog"
      title="添加數(shù)據(jù)"
      :visible.sync="addJsonVisible"
      width="415px"
      top="23vh"
    >
      <el-button @click="addTableItem">添加</el-button>
      <el-button @click="delTableItem">刪除</el-button>
      /* 近期更新 */
      <el-button @click="resetForm('myForm')">重置</el-button> 
      <el-form
        :model="addJsonForm"
        ref="addJsonForm"
        :rules="addJsonForm.addJsonRules"
        :inline="true"
        label-width="108px"
      >
        <el-table
          :data="addJsonForm.params"
          style="width: 100%"
          border
          @selection-change="addJsonSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>

          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              <span style="color:#2d65dc;">成員名稱</span>
              <i style="color:#F56C6C;">*</i>
            </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'params.' + scope.$index + '.name'"
                :rules="addJsonForm.addJsonRules.name"
              >
                <el-input
                  type="text"
                  v-model="scope.row.name"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column align="center">
            <template slot="header" slot-scope="scope">
              <span style="color:#2d65dc;">成員值</span>
              <i style="color:#F56C6C;">*</i>
            </template>
            <template slot-scope="scope">
              <el-form-item
                :prop="'params.' + scope.$index + '.value'"
                :rules="addJsonForm.addJsonRules.value"
              >
                <el-input
                  type="text"
                  v-model="scope.row.value"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="resetAddJsonPopup">取 消</el-button>
        <el-button type="primary" @click="submitAddJsonPopup">確定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      addJsonVisible: false,
      addJsonMultiple: [],
      FormInAddPopup: {
        dataSourceJson: "" // 獲取到的dataJson,顯示為 [{name:"",value:""},{name:"",value:""}] 的格式
      },
      tabItemId: 1, // 表格數(shù)據(jù)的 id
      addJsonForm: {
        params: [
          {
            name: "",
            value: "",
            tabItemId: 1 // 彈框中，刪除空行的唯一標(biāo)志，默認(rèn)從1開始
          }
        ],
        addJsonRules: {
          name: [
            { required: true, message: "請(qǐng)輸入成員名稱", trigger: "blur" }
          ],
          value: [
            { required: true, message: "成員值不能為空", trigger: "blur" }
          ]
        }
      }
    };
  },
  methods: {
  // 近期更新
    resetForm(formName) {
      this.$refs[formName].resetFields();
   },
    RndNum(n) {
      // 生成隨機(jī)數(shù)
      let rdmNum = "";
      for (let i = 0; i < n; i++) {
        rdmNum += Math.floor(Math.random() * 10); // [0,10)的整數(shù)
      }
      return rdmNum;
    },
    showPopup() {
      
      this.addJsonVisible = true;
    },
    addJsonSelectionChange(val) {
      this.addJsonMultiple = val;
    },
    resetAddJsonPopup() {
      //關(guān)閉 固定值彈窗
      this.$set(this.addJsonForm, "params", []);
      this.addJsonVisible = false;
    },
    submitAddJsonPopup() {
      //保存 固定值
      if (this.addJsonMultiple.length > 0) {
        this.$refs["addJsonForm"].validate(valid => {
          if (valid) {
            let result = [];
            this.addJsonMultiple.map(val => {
              this.$delete(val, "tabItemId"); // 刪除tabItemId屬性
              result.push(val);
            });
            result.length ? (result = JSON.stringify(result)) : (result = "");
            this.FormInAddPopup.dataSourceJson = result;
            this.addJsonVisible = false;
          } else {
            return false;
          }
        });
      } else {
        this.$message.warning("請(qǐng)選擇要保存的數(shù)據(jù)");
      }
    },
    addTableItem() {
      this.tabItemId = "T" + this.RndNum(6); //生成以T開頭的七位隨機(jī)數(shù)
      this.addJsonForm.params.push({
        name: "",
        value: "",
        tabItemId: this.tabItemId
      });
    },

    delTableItem() {
      // 確認(rèn)刪除
      if (this.addJsonMultiple.length > 0) {
        let arrs = [];
        let ids = this.addJsonMultiple.map(val => val.tabItemId); //拿到選中的數(shù)據(jù)id,
        this.addJsonForm.params.forEach(item => {
          if (!ids.includes(item.tabItemId)) {
            // 當(dāng)id在params中，表示數(shù)據(jù)被選中，該將其刪除，即將不被選中的保留
            arrs.push(item);
          }
        });
        this.addJsonForm.params = arrs;
      } else {
        this.$message.warning("請(qǐng)選擇要?jiǎng)h除的數(shù)據(jù)");
      }
    }
  }
};
</script>

到此這篇關(guān)于element的el-form和el-table嵌套使用實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)element el-form和el-table嵌套內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: