vue3表单嵌套表格实现增删改查，并表单校验。

最新推荐文章于 2024-06-20 11:40:33 发布
最新推荐文章于 2024-06-20 11:40:33 发布
阅读量1.5k 收藏 7
点赞数 2
文章标签： vue.js javascript elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ygbwan/article/details/129247400
版权 
<template>
  <!-- 嵌套表单 -->
  <el-table
    :class="`_table_${popIndex}`"
    :data="modelValue"
    :row-key="_options.rowKey"
    :stripe="_options.stripe"
    :tooltipEffect="_options.tooltipEffect"
    :show-header="_options.showHeader"
    :row-style="_options.rowStyle"
    :border="_options.border"
    :size="_options.size"
    table-layout="auto"
    resizable
  >
    <el-table-column width="80" align="center">
      <template #default="scope">
        <div class="styleMove" :id="`el_row_${scope.column.rowSpan}`">
          <el-icon :size="24" color="rgb(182, 178, 178)"><Operation /></el-icon>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      v-for="(
        { label, width, searchType, prop, defaultData, config }, index
      ) in rowFormColumns"
      :key="index"
      :prop="prop"
      :label="label"
      :width="width"
    >
      <template #default="scope">
        <el-form-item
          class="styleForm"
          :prop="`${propKey}.${popIndex}.${listKey}.${scope.$index}.${prop}`"
          :rules="
            modelValue[scope.$index]?.evaluateResultType ===
              'skill_evaluate_result_type_1' && searchType === 'number'
              ? {
                  required: false
                }
              : formRules[prop]
          "
        >
          <CommonSelect
            v-if="searchType === 'select'"
            v-model="modelValue[scope.$index]"
            :prop="prop"
            :lan="lan"
            :placeholder="validateMsg.select[lan]"
            :config="{ ...config?.selectConfig }"
          >
          </CommonSelect>

          <el-select
            v-if="searchType === 'newselect'"
            collapse-tags
            collapse-tags-tooltip
            v-model="modelValue[scope.$index][prop]"
            :placeholder="validateMsg.select[lan]"
            :multiple="config?.selectConfig?.multiple"
          >
            <el-option
              v-for="(item, vindex) in rowFormColumns[2].config?.selectConfig
                .options"
              :key="vindex"
              :label="item.text[lan]"
              :value="item.value"
            />
          </el-select>

          <ElInputNumber
            v-if="searchType === 'number'"
            :placeholder="validateMsg.input[lan]"
            v-model="modelValue[scope.$index][prop]"
            :min="config?.min || 0"
            :max="config?.max || 10"
            :disabled="
              modelValue[scope.$index]?.evaluateResultType ===
                'skill_evaluate_result_type_1' || config.selectConfig?.disabled
            "
            :step="1"
            step-strictly
          />
          <!-- <el-input
            v-if="searchType === 'number'"
            placeholder="请输入"
            :min="config?.min || 0"
            :max="config?.max || 10"
            type="number"
            :disabled="
              modelValue[scope.$index]?.evaluateResultType ===
                'skill_evaluate_result_type_1' || config.selectConfig?.disabled
            "
            oninput="value=value.replace(/[^\d]/g,'')"
            v-model.number="modelValue[scope.$index][prop]"
          ></el-input> -->

          <ElInput
            v-else-if="searchType === 'input' && !hasObj(defaultData)"
            v-model="modelValue[scope.$index][prop]"
            :placeholder="validateMsg.input[lan]"
            style="width: 100%"
            :type="config?.types"
            :rows="config?.rows"
            clearable
          />
          <ElInput
            v-else-if="searchType === 'input' && hasObj(defaultData)"
            v-model="modelValue[scope.$index][prop][lan]"
            :placeholder="validateMsg.input[lan]"
            style="width: 100%"
            :type="config?.types"
            :rows="config?.rows"
            clearable
          />
        </el-form-item>
      </template>
    </el-table-column>
    <!-- 自适应占位 -->
    <el-table-column
      fixed="right"
      width="100"
      v-if="options?.showDel"
      label="操作"
      align="center"
    >
      <template #default="{ $index }">
        <div class="styleDel">
          <ElButton
            :lan="commonStore.lan"
            type="danger"
            link
            size="small"
            @click="handelReduceRow($index)"
          >
            删除
          </ElButton>
        </div>
      </template>
    </el-table-column>
  </el-table>

  <ElRow v-if="options?.showAdd">
    <ElCol :span="24" justify="center" align="center">
      <div class="styleAdd" @click="handelAddRow">添加</div>
    </ElCol>
  </ElRow>
</template>

<script lang="ts" setup>
import { Operation } from '@element-plus/icons-vue';
import CommonSelect from '@common/components/CommonSelect.vue';
import { useCommonStore } from '@common/store';
import { validateMsg } from '@common/utils';

interface FormOptionConfigType {
  initAdd?: boolean;
  showAdd?: boolean;
  showDel?: boolean;
}
interface PropsType {
  modelValue: any;
  propKey?: string;
  popIndex: number;
  listKey: string;
  formRules: IObject;
  rowFormColumns: IObject;
  options?: FormOptionConfigType;
}
interface EmitEvent {
  (e: 'handelAddRow', vindex: number, obj: IObject): void;
}
const route = useRoute();
const emit = defineEmits<EmitEvent>();
const props = defineProps<PropsType>();
const {
  modelValue,
  propKey,
  popIndex,
  listKey,
  formRules,
  rowFormColumns,
  options
} = toRefs(props);
const commonStore = useCommonStore();
const { lan } = storeToRefs(commonStore);

// 二层嵌套配置
const _options = {
  rowKey: 'id',
  stripe: false,
  border: true,
  size: 'small',
  tooltipEffect: 'dark',
  showHeader: true,
  showPagination: true,
  rowStyle: () => ({}) // 行样式 cursor:pointer
};

// 行数据格式化和序列化
const initRowData: IObject = JSON.parse(
  JSON.stringify(rowFormColumns.value)
).reduce(
  (formObj: IObject, initObj: IObject) => (
    (formObj[initObj.prop] = initObj.defaultData), formObj
  ),
  {}
);
const hasObj = computed(
  () =>
    (val: LpkObjectType | any): boolean =>
      Object.prototype.toString.call(val) === '[object Object]'
);

const handelAddRow = () => {
  const obj = JSON.parse(JSON.stringify(initRowData));
  emit('handelAddRow', popIndex.value, obj);
};
if (!route.query.id) {
  handelAddRow();
}
const handelReduceRow = (index: number) => {
  modelValue.value.splice(index, 1);
};
</script>

<style lang="scss" scoped>
.styleForm {
  margin-top: 15px;
}

.styleDel {
  display: flex;
  justify-content: center;
  align-items: center;
}

.styleAdd {
  border: 1px dashed rgb(182, 178, 178);
  color: rgb(182, 178, 178);
  margin: 20px 0;
  padding: 4px 0;
  border-radius: 4px;
}

.styleMove:hover,
.styleAdd:hover {
  cursor: pointer;
}

.el-table {
  --el-table-row-hover-bg-color: none;
}
</style>

以上子组件。下面父组件

<template>
  <ElForm
    ref="ruleFormRef"
    class="edit-form"
    :model="formData"
    :rules="formRules"
  >
    <ElRow class="rowItem">
      <el-card class="fromCard">
        <template #header>
          <div>
            <span class="title">基本信息</span>
          </div>
        </template>
        <ElCol :span="12">
          <ElFormItem
            label="评价表名称"
            :label-width="labelWidth"
            prop="evaluateName"
          >
            <ElInput
              clearable
              :placeholder="validateMsg.input[lan]"
              v-model="formData.evaluateName"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem
            label="适用公司"
            :label-width="labelWidth"
            prop="departmentId"
          >
            <CommonSelect
              v-model="formData"
              prop="departmentId"
              @change="departmenFun"
              :lan="lan"
              :config="{
                filterable: true,
                optionKV: {
                  labelKey: 'companyName',
                  valueKey: 'id'
                },
                opsQueryFunc: GlobalCommonApi.getAllCompanys
              }"
            />
          </ElFormItem>
        </ElCol>

        <ElCol :span="12">
          <ElFormItem
            label="适用岗位"
            :label-width="labelWidth"
            prop="stationIds"
          >
            <CommonSelect
              v-model="formData"
              prop="stationIds"
              :lan="lan"
              :config="{
                multiple: true,
                filterable: true,
                options: stationIdOps,
                optionKV: {
                  labelKey: 'actualPostCodeAndName',
                  valueKey: 'id'
                }
              }"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem
            label="L1鉴定方式"
            :label-width="labelWidth"
            prop="l1CheckMode"
          >
            <CommonSelect
              v-model="formData"
              prop="l1CheckMode"
              :lan="lan"
              :config="{
                filterable: true,
                fixedParam: {
                  dicType: 'gshr_skill_evaluate_l1_check_mode'
                },
                optionKV: {
                  labelKey: 'text',
                  valueKey: 'value'
                },
                opsQueryFunc: GlobalCommonApi.starLevelSelectDic
              }"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="12">
          <ElFormItem label="状态" :label-width="labelWidth" prop="state">
            <CommonSelect
              v-model="formData"
              prop="state"
              :lan="lan"
              :config="{
                filterable: true,
                fixedParam: {
                  dicType: 'gshr_skill_config_state'
                },
                optionKV: {
                  labelKey: 'text',
                  valueKey: 'value'
                },
                opsQueryFunc: GlobalCommonApi.starLevelSelectDic
              }"
            />
          </ElFormItem>
        </ElCol>
        <ElCol :span="20">
          <ElFormItem label="填写指南" :label-width="labelWidth" prop="guide">
            <ElInput
              v-model="formData.guide"
              :placeholder="validateMsg.input[lan]"
              autocomplete="off"
              :rows="8"
              type="textarea"
              style="width: 100%"
            />
          </ElFormItem>
        </ElCol>
      </el-card>
    </ElRow>

    <el-card class="fromCardTop">
      <template #header>
        <div class="applicable">
          <span class="title">评价表设置</span>
          <div>
            适用场景:
            <CommonSelect
              style="width: 200px"
              v-model="formData"
              prop="applicable"
              @change="applicableFun"
              :lan="lan"
              :config="{
                filterable: true,
                fixedParam: {
                  dicType: 'gshr_skill_evaluate_scene'
                },
                optionKV: {
                  labelKey: 'text',
                  valueKey: 'value'
                },
                opsQueryFunc: GlobalCommonApi.starLevelSelectDic
              }"
            />
          </div>
        </div>
      </template>
      <div :span="24" v-for="(item, i) in formData.saveRequests" :key="`_${i}`">
        <p>{{ item.title }}</p>
        <CommenForm
          v-model="formData.saveRequests[i]['itemSaveRequests']"
          propKey="saveRequests"
          :popIndex="i"
          :listKey="item.key"
          :formRules="formRules"
          :rowFormColumns="getSearchColumns[i]"
          :options="formOptionConfig"
          @handelAddRow="handelAddRow"
        >
        </CommenForm>
      </div>
    </el-card>
    <div class="btnFooter">
      <span class="dialog-footer">
        <ElButton
          :loading="loding"
          @click="router.push({ path: '/sys-manage/eva-table-config' })"
          >{{ $lpk('Cancel', lan) }}</ElButton
        >
        <ElButton type="primary" @click="confirm" :loading="loding">
          {{ $lpk('Confirm', lan) }}
        </ElButton>
      </span>
    </div>
  </ElForm>
</template>
<script lang="ts" setup>
import CommonSelect from '@common/components/CommonSelect.vue';
import CommenForm from './CommonForm.vue';
import { useCommonStore } from '@common/store';
import type { FormInstance } from 'element-plus';
import { validateRequire, validateMsg } from '@common/utils';
import { GlobalCommonApi } from '@common/reqApi';
import { useStarlevelStore } from '@skills/store';
import { SkillsApi } from '@skills/reqApi';

interface IDialogState {
  formData: IObject;
  evaluateSceneOps: IObject[];
  stationIdOps: IObject[];
  oneData: IObject[];
  twoData: IObject[];
  oneNewData: IObject[];
  twoNewData: IObject[];
}
const starStore = useStarlevelStore();
const { contentOneOPs, contentTwoOPs, resultTypeOps } = storeToRefs(starStore);
const route = useRoute();
const ruleFormRef = ref<FormInstance>();
const commonStore = useCommonStore();
const { lan } = storeToRefs(commonStore);
const loding = ref(false);
const router = useRouter();
const labelWidth = '120px';
const formOptionConfig = {
  initAdd: true,
  showAdd: true,
  showDel: true
};

// form提交相关
const initData = {
  applicable: '',
  departmentId: '',
  stationIds: [],
  state: 'skill_config_state_1',
  l1CheckMode: '',
  guide: '',
  evaluateName: '',
  saveRequests: []
};

let state = reactive<IDialogState>({
  formData: JSON.parse(JSON.stringify(initData)),
  evaluateSceneOps: [],
  stationIdOps: [],
  oneData: [],
  twoData: [],
  oneNewData: [],
  twoNewData: []
});

const {
  formData,
  evaluateSceneOps,
  stationIdOps,
  oneData,
  twoData,
  oneNewData,
  twoNewData
} = toRefs(state);
GlobalCommonApi.starLevelSelectDic({
  dicType: 'gshr_skill_evaluate_scene'
}).then(res => {
  evaluateSceneOps.value = res.data;
});
const handelAddRow = (vindex: number, obj: IObject) => {
  formData.value.applicable = '';
  applicableFun({ val: '' });
  if (vindex === 0) {
    oneData.value.push(obj);
  } else {
    twoData.value.push(obj);
  }
};
const applicableFun = (data: IObject) => {
  oneNewData.value = [];
  twoNewData.value = [];
  oneData.value.forEach((element: IObject) => {
    const flagIndex = element.evaluateScenes.findIndex((value: string) => {
      return value === data.val;
    });
    if (flagIndex !== -1) {
      oneNewData.value.push(element);
    }
  });
  twoData.value.forEach((element: IObject) => {
    const flagIndex = element.evaluateScenes.findIndex((value: string) => {
      return value === data.val;
    });
    if (flagIndex !== -1) {
      twoNewData.value.push(element);
    }
  });
  formData.value = {
    ...formData.value,
    saveRequests: [
      {
        title: '项目一：掌握应知的理论知识',
        key: 'itemSaveRequests',
        evaluateItem: 'skill_evaluate_item_1',
        itemSaveRequests: data.val ? oneNewData.value : oneData.value
      },
      {
        title: '项目二：按质量要求安全操作',
        key: 'itemSaveRequests',
        evaluateItem: 'skill_evaluate_item_2',
        itemSaveRequests: data.val ? twoNewData.value : twoData.value
      }
    ]
  };
};

if (route.query.id) {
  SkillsApi.getConfigEvaluate({ id: route.query.id }).then(async res => {
    const {
      departmentId,
      stationIds,
      state,
      l1CheckMode,
      guide,
      evaluateName,
      saveRequests
    } = res.data;
    stationIdOps.value = res.data?.stationMessage;
    await saveRequests.forEach((element: IObject) => {
      if (element.evaluateItem === 'skill_evaluate_item_1') {
        oneData.value.push(...element.itemSaveRequests);
      } else {
        twoData.value.push(...element.itemSaveRequests);
      }
    });
    formData.value = {
      departmentId,
      stationIds,
      state,
      l1CheckMode,
      guide,
      evaluateName,
      saveRequests: [
        {
          title: '项目一：掌握应知的理论知识',
          key: 'itemSaveRequests',
          evaluateItem: 'skill_evaluate_item_1',
          itemSaveRequests: oneData.value
        },
        {
          title: '项目二：按质量要求安全操作',
          key: 'itemSaveRequests',
          evaluateItem: 'skill_evaluate_item_2',
          itemSaveRequests: twoData.value
        }
      ]
    };
  });
} else {
  formData.value = {
    ...formData.value,
    saveRequests: [
      {
        title: '项目一：掌握应知的理论知识',
        key: 'itemSaveRequests',
        evaluateItem: 'skill_evaluate_item_1',
        itemSaveRequests: oneData.value
      },
      {
        title: '项目二：按质量要求安全操作',
        key: 'itemSaveRequests',
        evaluateItem: 'skill_evaluate_item_2',
        itemSaveRequests: twoData.value
      }
    ]
  };
}
const departmenFun = (data: IObject) => {
  formData.value.stationIds = [];
  const item: IObject = data?.ops?.find(
    (item: IObject) => item.id == data?.val
  );
  GlobalCommonApi.queryAllActualPost({
    companyCode: item?.departmentCode
  }).then((res: IObject) => {
    stationIdOps.value = res.data;
  });
};
const formRules: IObject = computed(() => {
  return {
    evaluateName: [validateRequire(lan.value, 'input')],
    departmentId: [validateRequire(lan.value, 'select')],
    stationIds: [validateRequire(lan.value, 'select')],
    state: [validateRequire(lan.value, 'select')],
    l1CheckMode: [validateRequire(lan.value, 'select')],
    // 内层嵌套字段
    evaluateContent: [validateRequire(lan.value, 'select')],
    evaluateStandard: [validateRequire(lan.value, 'input')],
    evaluateScenes: [validateRequire(lan.value, 'select')],
    evaluateResultType: [validateRequire(lan.value, 'select')],
    score: [validateRequire(lan.value, 'input')]
  };
});

const confirm = () => {
  formData.value.applicable = '';
  applicableFun({ val: '' });
  ruleFormRef?.value?.validate((valid, fields) => {
    if (valid) {
      loding.value = true;
      if (route.query.id) {
        SkillsApi.getConfigEvaluateEdit({
          ...formData.value,
          id: route.query.id
        })
          .then(() => {
            ElMessage.success('编辑成功！');
            router.push({ path: '/sys-manage/eva-table-config' });
          })
          .finally(() => {
            loding.value = false;
          });
      } else {
        SkillsApi.getConfigEvaluateAdd(formData.value)
          .then(() => {
            ElMessage.success('添加成功！');
            router.push({ path: '/sys-manage/eva-table-config' });
          })
          .finally(() => {
            loding.value = false;
          });
      }
    } else {
      console.log('error submit!', fields);
    }
  });
};

const getSearchColumns = computed(() => {
  let newEvaluateSceneOps = [...evaluateSceneOps.value];
  if (formData.value.l1CheckMode === 'skill_evaluate_l1_check_mode_1') {
    newEvaluateSceneOps = evaluateSceneOps.value.filter(item => {
      return item.value !== 'skill_evaluate_scene_1';
    });
  }
  return [
    [
      {
        prop: 'evaluateContent',
        width: '250',
        defaultData: '',
        label: '内容',
        searchType: 'select',
        config: {
          selectConfig: {
            filterable: true,
            options: contentOneOPs.value,
            optionKV: {
              labelKey: 'name',
              valueKey: 'code'
            }
          }
        }
      },
      {
        prop: 'evaluateStandard',
        width: '250',
        defaultData: '',
        label: '评价基准',
        searchType: 'input',
        config: {}
      },
      {
        prop: 'evaluateScenes',
        width: '250',
        defaultData: [],
        label: '适用场景',
        searchType: 'newselect',
        config: {
          selectConfig: {
            multiple: true,
            filterable: true,
            options: newEvaluateSceneOps,
            optionKV: {
              labelKey: 'text',
              valueKey: 'value'
            }
          }
        }
      },
      {
        prop: 'evaluateResultType',
        width: '250',
        defaultData: '',
        label: '评价结果类型',
        searchType: 'select',
        config: {
          selectConfig: {
            filterable: true,
            optionKV: {
              labelKey: 'text',
              valueKey: 'value'
            },
            options: resultTypeOps.value
          }
        }
      },
      {
        prop: 'score',
        width: '250',
        defaultData: 0,
        label: '分值',
        searchType: 'number',
        config: {
          max: 100,
          min: 0
        }
      }
    ],
    [
      {
        prop: 'evaluateContent',
        width: '250',
        defaultData: '',
        label: '内容',
        searchType: 'select',
        config: {
          selectConfig: {
            filterable: true,
            optionKV: {
              labelKey: 'name',
              valueKey: 'code'
            },
            options: contentTwoOPs.value
          }
        }
      },
      {
        prop: 'evaluateStandard',
        width: '250',
        defaultData: '',
        label: '评价基准',
        searchType: 'input',
        config: {}
      },
      {
        prop: 'evaluateScenes',
        width: '250',
        defaultData: [],
        label: '适用场景',
        searchType: 'newselect',
        config: {
          selectConfig: {
            multiple: true,
            filterable: true,
            options: newEvaluateSceneOps,
            optionKV: {
              labelKey: 'text',
              valueKey: 'value'
            }
          }
        }
      },
      {
        prop: 'evaluateResultType',
        width: '250',
        defaultData: '',
        label: '评价结果类型',
        searchType: 'select',
        config: {
          selectConfig: {
            filterable: true,
            optionKV: {
              labelKey: 'text',
              valueKey: 'value'
            },
            options: resultTypeOps.value
          }
        }
      },
      {
        prop: 'score',
        width: '250',
        defaultData: 0,
        label: '分值',
        searchType: 'number',
        config: {
          max: 100,
          min: 0
        }
      }
    ]
  ];
});
</script>

<style lang="scss" scoped>
.fromCard {
  width: 99%;
}
.fromCardTop {
  height: auto;
  margin-top: 30px;
}
.title {
  font-weight: 600;
}
.btnFooter {
  margin: 15px 0 25px;
  float: right;
  .dialog-footer {
    clear: both;
  }
}

.el-divider--horizontal {
  margin: 15px 0;
}
.applicable {
  display: flex;
  justify-content: space-between;
}
</style>

ygbwan
关注
  • 2
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3.0 — element-plus 表单嵌套表格实现动态表单验证【实战】
Z.Dragon 的博客
04-10 1万+
我想有不少小伙伴都有遇到过表单嵌套表格，那么在这种情况下怎么实现动态验证呢？（即表单项可以动态添加/删除） 效果图如下 表格有添加和删除按钮，点击提交进行表单验证 element官方有给出表单动态验证的方法，但是实际上大多数项目的需求无法满足，所以需要在其基础上进行修改 首先data格式必须是对象包裹数组 forms: { tableData: [] } 然后表单绑定form数据 <el-form ref="forms" :model="forms"> 表格绑定tableData数据
Vue3 element-plus表单嵌套表格实现动态表单验证
路虽远，行则必至！
08-01 7188
rules对应data rules对象，prop对应表单字段（注意是表格里每一行对应的字段 forms.tableData[下标].key）prop的关键就在于下标 $index。
vue实现表格的查询，下拉框，以及分页功能
10-25
用vuejs实现表格的模糊查询，下拉框选择表格的分类，表格对应的列显示分类，以及点击某列内容进行跳转，以及分页的上一页下一页功能，和最后一页不能选择
Vue3_表单加入表格增删改查通用方法
最新发布
Rainbow_bead的博客
06-20 310
Vue3_表单加入表格增删改查通用方法
Vue3 element-plus el-form嵌套el-table，并且进行单行校验
Hoyinhs的博客
11-01 2460
element plus 小技巧
vue3 antd table表格的增删改查（一）input输入框根据关键字搜索【后台管理系统纯前端filter过滤】
XSL_HR的博客
11-28 4074
vue3 + antd + filter 纯前端过滤实现输入框input的关键字模糊搜索。通过接口将从后端获取到的数据展现在表格内，现在需要实现，根据关键字进行模糊搜索的功能。UI组件库沿用 ant design vue。
vue集成stripe结算界面
qq_43548590的博客
07-08 3299
vue集成stripe
vue3 antd table表格的增删改查（三）实现删除的数据的行样式修改【后台管理系统 纯前端rowClassName更改行样式】
XSL_HR的博客
12-25 4100
vue3 antd table表格的增删改查——通过rowClassName➕deep样式穿透➕css不可控操作，实现删除了的数据的行样式修改
vue elementUI 表单校验的实现代码（多层嵌套）
10-16
主要介绍了vue elementUI 表单校验的实现代码（多层嵌套），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue elementUI 表单校验功能之数组多层嵌套
12-08
本篇文章将详细介绍如何在Vue Element UI中进行数组多层嵌套的表单校验。 当数据结构包含数组，并且数组内的对象也需要进行校验时，直接在父级`el-form`中通过`prop`属性绑定规则可能无法达到预期效果。这是因为`el...
vue实现重置表单信息为空的方法
10-17
在传统的JavaScript或Vue.js中，我们通常通过手动将表单绑定的数据对象的属性值设为空字符串来实现这一功能。然而，随着Vue生态系统的发展，特别是与Vuex状态管理库和其他组件库（如Element UI、Ant Design Vue等）...
Vue3_ElementPlus_简单增删改查(2023)
Jacob的博客
06-12 2958
列表显示中注意事项使用由mock生成的随机数据作为数据源安装mock npm i vite-plugin-mock在vite.config.js中从vite-plugin-mock中引入viteMockServe在plugins中并配置mock自定义mock配置的路径plugins: [vue(),}),],resolve: {alias: {})在项目目录创建mock目录，创建mock.js用于响应前端发送的请求，并且把结果判断的值返回。
实现Vue3的增删改查——遇到的知识点与问题
m0_63989259的博客
06-01 2544
数组与对象遍历，vue，console，坑
Vue3学习(二)集成ElementPlus实现增删改查
m0_64393446的博客
06-25 3259
表格新增弹窗导入包装数据所需的组件定义变量点击新增数据时功能实现。
vue3 表格嵌套表格
CMDN123456的博客
10-31 716
vue3 表格嵌套表格
vue3 封装 el-table 支持嵌套 + render + json 配置
weixin_44180190的博客
08-30 1308
vue3 封装 el-table js 版本代码 支持 嵌套标签 支持 json 配置 支持 render函数
vue3 组合式 ant.design组件Table嵌套表格，从后端获取数据并动态渲染
defined_的博客
05-09 3275
在根据官方文档使用ant.design中的嵌套表格时，发现官方文档很多地方都不够详细。 在过程中踩了不少坑，例如：子表如何获取父表的数据？如何获取子表的行索引？如何让子表的数据源来自父表该行的数据？总之，最后还是磕磕绊绊做完了功能，于是第一时间把代码整理出来以作分享。
vue3 + element Plus实现表格根据关键字合并行，并实现行的增删改操作
Jet_Lover的博客
10-12 2112
关于修改，其实和新增差不多这里就没有写了，合并表格并实现增删改查的功能就是这些。
Vue3 纯前端实现表格内容的添加,修改和删除
qq_41936090的博客
07-24 6881
Vue纯前端实现表格内容的添加和删除 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>test</title> <script src="https://unpkg.com/vue@next"></script> <style> span{
ant design vue 树形表格实现增删改查
04-21
要实现树形表格的增加、删除、修改和查询，您需要结合 Ant Design Vue 提供的 Table、Form 等组件来完成。尤其是在编辑和添加树形节点时，需要注意节点的层级和父子关系的处理。如果您需要更详细的操作和示例，请...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值