element-plus添加/删除表单项（一行三个

最新推荐文章于 2024-03-21 15:18:19 发布

anwenagululu

最新推荐文章于 2024-03-21 15:18:19 发布

阅读量1.9k

点赞数 1

分类专栏：代码文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/anwenagululu/article/details/132799609

版权

代码专栏收录该内容

25 篇文章 0 订阅

订阅专栏

效果

昨天的小需求，整理一下，想要在element-plus基础上做直接新增一行三列的效果，代码如下

<template>
  <div class="Dt-content">
    <el-dialog v-model="dialogVisible" title="干预" @close="cancel" style="width: 80%">
      <el-form @submit.native.prevent="submitForm">
        <el-form-item
          style="width: 100%"
          v-for="(row, index) in dynamicValidateForm.rows"
          :key="index"
        >
          <el-row :gutter="10" style="width: 100%">
            <el-col :span="6">
              <el-form-item
                :label="'项目'"
                :prop="'rows.' + index + '.interveneName'"
                
              >
                <el-input placeholder="输入项目" v-model="row.interveneName" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                :label="'内容'"
                :prop="'rows.' + index + '.interveneContent'"
                
              >
                <el-input placeholder="输入内容" v-model="row.interveneContent" />
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item
                :label="'链接'"
                :prop="'rows.' + index + '.interveneUrl'"
                
              >
                <el-input placeholder="输入链接" v-model="row.interveneUrl" />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item
                :label="'推送模板'"
                :prop="'rows.' + index + '.serviceTemplateId'"
               
              >
                <el-select v-model="row.serviceTemplateId" placeholder="选择模版">
                  <el-option label="Template 1" value="template1" />
                  <el-option label="Template 2" value="template2" />
                  <el-option label="Template 3" value="template3" />
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-row :span="2">
              <el-button class="mt-2" @click.prevent="removeRow(row, index)"
                >删除</el-button
              >
            </el-row>
          </el-row>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="addRow">新增</el-button>
          <el-button type="primary" @click="submitForm">保存</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup name="">
import { inject, ref } from "vue";
import { routeInterveneList } from "@/api/teamMenu/index.js";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits(["handelOK"]);
const dynamicValidateForm = reactive({
  rows: [],
});
const removeIds = ref([]);
const addRow = () => {
  const newRow = {
    interveneContent: "",
    interveneName: "",
    interveneUrl: "",
    serviceTemplateId: "",
  };

  dynamicValidateForm.rows.push(newRow);
};
const submitForm = () => {
  cancel();
  emit("handelOK", dynamicValidateForm.rows, removeIds.value);
};
const removeRow = (row, index) => {
  dynamicValidateForm.rows.splice(index, 1);

  let newV = row.id;
  removeIds.value.push(newV);
};

const loading = ref(false);

const props = defineProps({
  id: {
    type: String,
    default: "",
  },
});
const tableData = ref([]);
const dialogVisible = ref(false); // 弹窗显示

// 展示弹窗
function show() {
  dialogVisible.value = true;
  Listdata();
}
function Listdata() {
  loading.value = true;
  routeInterveneList({
    routeDetailId: props.id,
  }).then((res) => {
    loading.value = false;
    dynamicValidateForm.rows = tableData.value = res.data;
  });
}
// 关闭弹窗
function cancel() {
  dialogVisible.value = false;
}

defineExpose({
  show,
});
</script>