快捷導(dǎo)航

vue elementui table編輯表單時(shí)彈框增加編輯明細(xì)數(shù)據(jù)的實(shí)現(xiàn)

更新時(shí)間：2024年10月17日 11:22:54 作者：weixin_45616483

在Vue項(xiàng)目中,通過使用Element UI框架實(shí)現(xiàn)表單及其明細(xì)數(shù)據(jù)的新增和編輯操作,主要通過彈窗形式進(jìn)行明細(xì)數(shù)據(jù)的增加和編輯,有效提升用戶交互體驗(yàn),本文詳細(xì)介紹了相關(guān)實(shí)現(xiàn)方法和代碼,適合需要在Vue項(xiàng)目中處理復(fù)雜表單交互的開發(fā)者參考

需求:
前端進(jìn)行新增表單時(shí)，同時(shí)增加表單的明細(xì)數(shù)據(jù)。明細(xì)數(shù)據(jù)部分，通過彈框方式增加或者編輯。
效果圖：

代碼：

   <!-- 新增主表彈窗 Begin -->
    <el-dialog
      :title="titleInfo"
      top="5vh"
      center
      width="85%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="dialogVisible"
    >
      <span>
        <el-form
          ref="form"
          :rules="formRules"
          :model="form"
          style="margin: 0 auto"
          label-width="32%"
        >
          <el-row :gutter="24">
            <el-col :span="12">
              <el-form-item label="申請日期:" prop="applyDate">
                <el-date-picker
                  v-model="form.applyDate"
                  style="width: 80%"
                  clearable
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="請選擇申請日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-col :span="14">
                <el-form-item
                  prop="applyDept"
                  label="申請部門:"
                  label-width="30%"
                >
                  <el-select
                    v-model="form.applyDept"
                    style="width: 80%"
                    :disabled="true"
                  >
                    <el-option
                      v-for="item in deptLists"
                      :key="item.id"
                      :label="item.departName"
                      :value="item.orgCode"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item
                  prop="applyUsername"
                  label="申請人:"
                  label-width="30%"
                >
                  <el-input
                    v-model="form.applyUsername"
                    style="width: 70%"
                    :disabled="true"
                  />
                </el-form-item>
              </el-col>
            </el-col>
          </el-row>
        </el-form>
        <el-card>
          <div slot="header">
            <span style="font-weight: bold">外來人員名單</span>
            <el-button
              style="float: right"
              type="primary"
              @click="insertExterRow"
              >添加</el-button
            >
          </div>
          <el-table
            ref="exterTable"
            align="center"
            highlight-cell
            keep-source
            stripe
            border
            style="width: 100%"
            max-height="400"
            :data="exterTableData"
            :edit-config="{ trigger: 'click', mode: 'row', showStatus: true }"
          >
            <el-table-column prop="useUser" label="姓名" align="center" />
            <el-table-column prop="idCard" label="身份證號" align="center" />
            <el-table-column prop="phone" label="手機(jī)號" align="center" />
            <el-table-column label="操作" align="center" width="220">
              <template slot-scope="scope">
                <el-button
                  mode="text"
                  icon="el-icon-edit"
                  @click="editExterRow(scope.$index, scope.row)"
                />
                <el-button
                  mode="text"
                  icon="el-icon-delete"
                  @click="removeExterRow(scope.$index, scope.row)"
                />
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="success" :loading="saveLoading" @click="save"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <!-- 新增主表彈窗 End -->
    <!-- 外來人員彈窗 Start-->
    <el-dialog
      :title="exterTitleInfo"
      top="5vh"
      center
      width="50%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="exterDialogVisible"
    >
      <span>
        <el-form
          ref="exterForm"
          :rules="exterFormRules"
          :model="exterForm"
          style="margin: 0 auto"
          label-width="25%"
        >
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="姓名:" prop="useUser">
                <el-input
                  v-model="exterForm.useUser"
                  placeholder="請輸入姓名"
                  style="width: 80%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="身份證號:" prop="idCard">
                <el-input
                  v-model="exterForm.idCard"
                  placeholder="請輸入身份證號"
                  style="width: 80%"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="手機(jī)號:" prop="phone">
                <el-input
                  v-model="exterForm.phone"
                  placeholder="請輸入手機(jī)號"
                  style="width: 80%"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelExter">取消</el-button>
        <el-button type="success" :loading="exterSaveLoading" @click="saveExter"
          >保存</el-button
        >
      </span>
    </el-dialog>
    <!--外來人員彈窗 End-->
export default {
  data() {
    return {
      // 表單
      form: {},
      exterForm: {},
      exterTableData: [],
      //form表單驗(yàn)證規(guī)則
      exterFormRules: {}
    }
  },
  methods: {
   // 添加一行，外來人員信息
    insertExterRow() {
      this.exterTitleInfo = '外來人員信息新增'
      this.exterForm = {}
      this.exterDialogVisible = true
      this.selectExterRow = null
      this.$nextTick(() => {
        this.$refs.exterForm.clearValidate() // 移除校驗(yàn)結(jié)果
      })
    },
    // 編輯一行，外來人員信息
    editExterRow(index, row) {
      this.exterTitleInfo = '外來人員信息編輯'
      this.exterDialogVisible = true
      this.selectExterRow = row
      this.exterForm = Object.assign({}, row)
      this.$nextTick(() => {
        this.$refs.exterForm.clearValidate() // 移除校驗(yàn)結(jié)果
      })
    },
    // 刪除一行，外來人員信息
    removeExterRow(index, row) {
      this.$confirm('此操作將永久刪除當(dāng)前信息, 是否繼續(xù)?', '提示', {
        confirmButtonText: '確定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(() => {
          this.exterTableData.splice(index, 1)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消刪除'
          })
        })
    },
    // 保存外來人員信息
    saveExter() {
      this.$refs.exterForm.validate((valid) => {
        if (valid) {
          this.exterSaveLoading = true
          if (this.selectExterRow) {
            Object.assign(this.selectExterRow, this.exterForm)
          } else {
            this.exterTableData.push(this.exterForm)
          }
          this.exterSaveLoading = false
          this.exterDialogVisible = false
        } else {
          return false
        }
      })
    },
    cancelExter() {
      this.exterForm = {}
      this.exterDialogVisible = false
    }
  }
}

到此這篇關(guān)于vue elementui table編輯表單時(shí)彈框增加編輯明細(xì)數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue elementui table編輯表單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: