AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue3+TS+Vant3——增删改input和通过双页面进行增删改操作

2023-04-23 204
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 增删改input和通过双页面进行增删改操作

Vue3+TS+Vant3——增删改input和通过双页面进行增删改操作

两种方案：

第一种点击添加按钮添加一项，缺点：页面过于臃肿，用户体验较差

3da19757effd4f25b1231e92085f955a.gif

第二种：分成两种页面进行添加等操作

1793b56f046448ec8f22ce18bc410557.gif

先说一下第一种，我这里用到了vant3Ui组件库

直接上代码：

<!-- aaa -->
<template>
  <van-sticky>
    <header-slot>
      <template #denglu>
        <van-nav-bar title="aaa" left-arrow @click-left="()=>{router.back();}">
        </van-nav-bar>
      </template>
    </header-slot>
  </van-sticky>
  <van-form @submit="onSubmit">
    <van-cell-group inset>
      <div v-for="(item,index) in formData.arr" :key="index" class="box1">
        <div class="borders"></div>
        <van-button type="danger" v-if="index!=0" size="mini" class="delete" @click="deleteRow(index)">删除</van-button>
        <div class="">
          <van-field v-model="item.aaa" :name="'aaa'+index" placeholder="aaa" />
          <van-field v-model="item.bbb" :name="'bbb'+index" placeholder="bbb" />
          <van-field v-model="item.ccc" :name="'ccc'+index" placeholder="ccc" />
        </div>
      </div>
      <div class="borders"></div>
      <van-button type="primary" size="small" class="button" @click="butclick2">添加一项</van-button>
    <div style="margin: 16px;" class="submit">
      <van-button round block type="primary" native-type="submit" color="#FCD39F" :loading="status.submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
  <script lang='ts' setup>
import { ref, onMounted, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import { Notify, Toast, Button } from 'vant';
const defaultData = {
  arr: [
    {
      appellation: "",
      getName: "",
      workplace: "",
      office_code: "",
    },
  ],
  count: 0,
};
const butclick = () => {
  let obj={
    appellation: "",
      getName: "",
      workplace: "",
      office_code: "",
  }
  formData.value.arr.push(obj);
  /* 方法二 */
/*   let arrs: any = [];
  arrs.push({
    appellation: "",
    getName: "",
    workplace: "",
    office_code: "",
  });
  formData.value.arr.push(arrs);
  console.log(formData.value);
  formData.value.count++;
  console.log(formData.value.count); */
};
/* 删除 */
const deleteRow = (index: any) => {
  console.log(index);
  formData.value.arr.splice(index, 1);
};
const onConfirm = (value: any) => {
  formData.value.highest = value;
  showPicker.value = false;
};
const formData = ref<typeof defaultData>(Object.assign({}, defaultData));
const status = reactive({
  loading: true,
  submit: false,
});
onMounted(() => {
  let sub: any = window.localStorage.getItem("onSubmit");
if (sub !== null) {
 console.log( formData.value.explain=JSON.parse(sub).explain);
 console.log( formData.value.arr=JSON.parse(sub).arr);
}
});
const onSubmit = (values: any) => {
  console.log("submit", values = formData.value);
  window.localStorage.setItem("onSubmit", JSON.stringify(values));
};
const router = useRouter();
</script>
<style scoped lang='less'>
</style>

新增节点

const butclick = () => {
  let obj={
    appellation: "",
      getName: "",
      workplace: "",
      office_code: "",
  }
  formData.value.arr.push(obj);
  /* 方法二 */
/*   let arrs: any = [];
  arrs.push({
    appellation: "",
    getName: "",
    workplace: "",
    office_code: "",
  });
  formData.value.arr.push(arrs);
  console.log(formData.value);
  formData.value.count++;
  console.log(formData.value.count); */
};

其中obj里的对象名称要跟reactive中创建这个的数组里的名称一样

bc1ea77afefd425997f78a8a6ff380d0.png

090953650183497f9348b447bc461d09.png

Vue3是通过v-model生成新的节点，无需用克隆节点生成新的Dom

这里因为不需要进入页面，所以直接引入接口就可以了，无需写编辑事件

删除：获取对应选中的div盒子，之后对盒子进行删除操作

const deleteRow = (index: any) => {
  console.log(index);
  formData.value.arr.splice(index, 1);
};

第二种方法

<!-- 教育背景 -->
<template>
  <van-sticky>
    <header-slot>
      <template #denglu>
        <van-nav-bar title="教育背景" left-arrow @click-left="()=>{router.back();}">
        </van-nav-bar>
      </template>
    </header-slot>
  </van-sticky>
  <van-form @submit="onSubmit" input-align="right">
    <van-cell-group inset>
      <h1>教育背景(高中起填)</h1>
      <van-cell-group>
        <div v-if="jiaoyu instanceof Array || formData.educational.length ==0">
          <van-cell value="尚未填写" />
        </div>
        <div v-if="jiaoyu.educational">
          <!-- formData.educational -->
          <div v-for="(item,index) in  jiaoyu.educational" :key="index">
            <van-swipe-cell>
              <van-cell :title="item.school" @click="editoriaClick(index)" is-link :value="item.time" :label="item.major" />
              <template #right>
                <van-button square type="danger" text="删除" @click="delectClick(index)" />
              </template>
            </van-swipe-cell>
          </div>
        </div>
      </van-cell-group>
      <!-- <van-divider  :style="{ color: '#B0A8B9', borderColor: '#B0A8B9'}"/> -->
      <van-button type="primary" size="small" class="button" @click="btbclickAdd()">{{jiaoyu instanceof Array?'点我进行添加':'添加'}}</van-button>
      <van-divider :style="{ color: '#B0A8B9', borderColor: '#B0A8B9'}" />
      <!-- 最高学历绩点 -->
      <van-field v-model="formData.harp" name="harp" label="最高学历绩点" placeholder="最高学历绩点" />
      <!-- 成绩排名 -->
      <van-field v-model="formData.classRank" is-link readonly name="classRank" label="成绩排名" placeholder="点击选择成绩排名" @click="status.showPicker3 = true;" />
      <van-popup v-model:show="status.showPicker3" position="bottom">
        <van-picker :columns="columns3" @confirm="onConfirm4" @cancel="status.showPicker3 = false" />
      </van-popup>
      <!-- 证明人/联系方式 -->
      <van-field v-model="formData.references" name="references" label="证明人/联系方式" placeholder="证明人/联系方式" />
      <!-- 次高学历绩点 -->
      <van-divider :style="{ color: '#B0A8B9', borderColor: '#B0A8B9'}" />
      <!-- 次高学历绩点 -->
      <van-field v-model="formData.mostHarp" name="mostHarp" label="次高学历绩点" placeholder="次高学历绩点" />
      <!-- 成绩排名 -->
      <van-field v-model="formData.mostClassRank" is-link readonly name="mostClassRank" label="成绩排名" placeholder="点击选择成绩排名" @click="status.showPicker4 = true;" />
      <van-popup v-model:show="status.showPicker4" position="bottom">
        <van-picker :columns="columns4" @confirm="onConfirm5" @cancel="status.showPicker4 = false" />
      </van-popup>
      <!-- 证明人/联系方式 -->
      <van-field v-model="formData.mostReferences" name="mostReferences" label="证明人/联系方式" placeholder="证明人/联系方式" />
    </van-cell-group>
    <div style="margin: 16px;" class="submit">
      <van-button round block type="primary" color="#FCD39F" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
  <script lang='ts' setup>
import { ref, onMounted, reactive, toRefs, computed } from "vue";
import { useRouter } from "vue-router";
import { Notify, Toast } from "vant";
import { type } from "os";
import path from "path/posix";
const defaultData = {
  educational: [],
  // 最高学历绩点
  harp: "",
  // 最高成绩排名
  classRank: "",
  // 最高证明人/联系方式
  references: "",
  // 次高学历绩点
  mostHarp: "",
  // 次高成绩排名
  mostClassRank: "",
  // 次高证明人/联系方式
  mostReferences: "",
};
const currIndex = ref("0");
const num = ref(0);
const num2 = ref(0);
const num3 = ref(0);
const columns = ["高中", "大专", "本科", "硕士", "博士"];
const columns2 = ["全日制", "非全日制"];
const columns3 = ["前10%", "前30%", "平均水平", "平均水平以下"];
const columns4 = ["前10%", "前30%", "平均水平", "平均水平以下"];
const formData = ref<typeof defaultData>(Object.assign({}, defaultData));
const status = reactive({
  loading: true,
  submit: false,
  showCalendar: false,
  showPicker: false,
  showPicker2: false,
  showPicker3: false,
  showPicker4: false,
});
/* 自定义区间 */
/* 成绩排名 */
const onConfirm4 = (value: any) => {
  formData.value.classRank = value;
  status.showPicker3 = false;
};
const onConfirm5 = (value: any) => {
  formData.value.mostClassRank = value;
  status.showPicker4 = false;
};
const propertiesClick = (index: any) => {
  status.showPicker2 = true;
  num3.value = index;
};
if (window.localStorage.getItem("jiaoyubeijing") != null) {
}
// @ts-ignore
let jiaoyu: any =
  // @ts-ignore
  JSON.parse(window.localStorage.getItem("jiaoyubeijing")) || [];
onMounted(() => {
  console.log("jiaoyu", jiaoyu);
  if (jiaoyu instanceof Array) {
    console.log("我现在是个数组");
    console.log(jiaoyu instanceof Array);
    jiaoyu = formData.value;
    window.localStorage.setItem("jiaoyubeijing", JSON.stringify(jiaoyu));
  } else {
    formData.value = jiaoyu;
    console.log(formData.value);
  }
  /*   let tem = formData.value as any;
      for (let i in formData.value) {
        if (res.data[i]) {
          tem[i] = res.data[i];
        }
      }
      formData.value = tem; */
});
// 编辑
const editoriaClick = (index: any) => {
  // console.log( jiaoyu.educational[index]);
  window.localStorage.setItem(
    "indexValue",
    JSON.stringify(jiaoyu.educational[index])
  );
  router.push({
    path: "/index/Education/Educational",
    query: { str: "编辑", index: index },
  });
};
/* 删除 */
const delectClick = (index: any) => {
  // jiaoyu.educational.splice(index, 1);
  console.log(index);
  console.log(formData.value.educational.splice(index, 1));
  window.localStorage.setItem("jiaoyubeijing", JSON.stringify(jiaoyu));
  console.log(formData.value);
};
/* 添加 */
const btbclickAdd = () => {
  router.push({ path: "/index/Education/Educational", query: { str: "添加" } });
};
const deleteRow = (index: any) => {
  formData.value.educational.splice(index, 1);
};
const onSubmit = (values: any) => {
  values = formData.value;
  console.log(values);
  window.localStorage.setItem("jiaoyubeijing", JSON.stringify(values));
};
const router = useRouter();
</script>
<style scoped lang='less'>
.box1 {
  position: relative;
}
:deep(.van-nav-bar) {
  background-color: #fef0e3;
}
.submit :deep(.van-button__text) {
  color: #7c4e36;
}
.button {
  display: block;
  // text-align: center;
  // line-height: 26px;
  background: #f60;
  border: #f60;
  color: #fff;
  margin: 10px auto;
  cursor: pointer;
  font-size: 12px;
  border-radius: 13px;
}
h1 {
  font-size: 16px;
  padding: 10px;
}
.borders {
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
  transform-origin: 50% 100%;
  background: #000;
  margin-top: -1px;
}
.delete {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
}
</style>

下面是详情页

<template>
  <van-sticky>
    <header-slot>
      <template #denglu>
        <van-nav-bar title="教育背景详情" left-arrow @click-left='()=>{router.back();}'></van-nav-bar>
      </template>
    </header-slot>
  </van-sticky>
  <van-form @submit="onSubmit" input-align="right">
    <van-cell-group inset>
      <van-divider :style="{  borderColor: '#B0A8B9'}" content-position="left">教育背景(高中起填)</van-divider>
      <div class="box1" v-for="(item,index) in formData.educational" :key="index">
        <!-- 时间 -->
        <van-field v-model="item.time" is-link readonly name="time" label="时间" placeholder="点击选择日期" @click="times(index)" />
        <van-calendar color="#1989fa" v-model:show="status.showCalendar" type="range" @confirm="onConfirm" />
        <!-- 学历 -->
        <van-field v-model="item.education" is-link readonly name="education" label="学历" placeholder="点击选择学历" @click="educationClick(index)" />
        <van-popup v-model:show="status.showPicker" position="bottom">
          <van-picker :columns="columns" @confirm="onConfirm2" :default-index="0" @cancel="status.showPicker = false" />
        </van-popup>
        <!-- 教学性质 -->
        <van-field v-model="item.properties" is-link readonly name="properties" label="教育性质" placeholder="点击选择教育性质" @click="propertiesClick(index)" />
        <van-popup v-model:show="status.showPicker2" position="bottom">
          <van-picker :columns="columns2" @confirm="onConfirm3" :default-index="0" @cancel="status.showPicker2 = false" />
        </van-popup>
        <!-- 导师 -->
        <van-field v-model="item.tutor" name="tutor" label="导师" placeholder="导师" />
        <!-- 学校 -->
        <van-field v-model="item.school" name="school" label="学校" placeholder="学校" />
        <!-- 专业 -->
        <van-field v-model="item.major" name="major" label="专业" placeholder="专业" />
      </div>
    </van-cell-group>
    <div style="margin: 16px;" class="submit">
      <van-button round block type="primary" color="#FCD39F" native-type="submit">
        {{route.query.str == '编辑'?'编辑':"保存"}}
      </van-button>
    </div>
    <div style="margin: 16px;" class="submit">
      <van-button round block type="primary" color="#EC002B" @click="delectClick">
        清空所有内容
      </van-button>
    </div>
  </van-form>
</template>
<script lang='ts' setup>
import { ref, onMounted, reactive } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Notify, Toast } from "vant";
const defaultData = {
  educational: [
    {
      // 时间
      time: "",
      // 学历
      education: "",
      // 教学性质
      properties: "",
      // 导师
      tutor: "",
      // 学校
      school: "",
      // 专业
      major: "",
    },
  ],
  // 最高学历绩点
  harp: "",
  // 最高成绩排名
  classRank: "",
  // 最高证明人/联系方式
  references: "",
  // 次高学历绩点
  mostHarp: "",
  // 次高成绩排名
  mostClassRank: "",
  // 次高证明人/联系方式
  mostReferences: "",
};
const formData = ref<typeof defaultData>(Object.assign({}, defaultData));
const columns = ["高中", "大专", "本科", "硕士", "博士"];
const columns2 = ["全日制", "非全日制"];
const status = reactive({
  loading: true,
  submit: false,
  showCalendar: false,
  showPicker: false,
  showPicker2: false,
  showPicker3: false,
  showPicker4: false,
});
const num = ref(0);
const num2 = ref(0);
const num3 = ref(0);
/* 自定义区间 */
const formatDate = (date: any) =>
  `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
/* 调用方法 */
const onConfirm = (date: any) => {
  const [start, end] = date;
  status.showCalendar = false;
  formData.value.educational[num.value].time = `${formatDate(
    start
  )} - ${formatDate(end)}`;
  console.log(date);
};
/* 时间 */
const times = (index: any) => {
  status.showCalendar = true;
  console.log(index);
  num.value = index;
};
/* 学历 */
const onConfirm2 = (value: any) => {
  formData.value.educational[num2.value].education = value;
  status.showPicker = false;
};
/* 学历 */
const educationClick = (index: any) => {
  status.showPicker = true;
  console.log(index);
  num2.value = index;
};
/* 教学性质 */
const onConfirm3 = (value: any) => {
  formData.value.educational[num3.value].properties = value;
  status.showPicker2 = false;
};
const propertiesClick = (index: any) => {
  status.showPicker2 = true;
  num3.value = index;
};
/* const btbclickAdd = () => {
  let obj = {
    time: "",
    education: "",
    properties: "",
    tutor: "",
    school: "",
    major: "",
  };
  formData.value.educational.push(obj);
  console.log(formData.value.educational);
}; */
let jybg: any = window.localStorage.getItem("JYBG");
let jiaoyubeijing: any = window.localStorage.getItem("jiaoyubeijing");
jybg = JSON.parse(jybg);
jiaoyubeijing = JSON.parse(jiaoyubeijing);
onMounted(() => {
  console.log();
  if (route.query.str == "编辑") {
    let indexValue = window.localStorage.getItem("indexValue") || [];
    console.log(indexValue);
    if (indexValue instanceof Array) {
      return;
    } else {
      formData.value.educational[0] = JSON.parse(indexValue);
    }
  } else {
  }
});
/* 删除 */
const delectClick = () => {
  let tem = formData.value.educational[0] as any;
  for (let i in formData.value.educational[0]) {
    tem[i] = "";
  }
  formData.value.educational[0] = tem;
};
/* 提交 */
const onSubmit = (values: any) => {
  console.log(values);
  if (route.query.str == "编辑") {
    Toast("编辑成功！");
    router.back();
    //  => item.id === obj.id ? obj : item
    jiaoyubeijing.educational[Number(route.query.index)] = values;
    window.localStorage.setItem("jiaoyubeijing", JSON.stringify(jiaoyubeijing));
    window.localStorage.removeItem("indexValue");
  } else {
    Toast("添加成功！");
    router.back();
    window.localStorage.removeItem("indexValue");
    if (window.localStorage.getItem("indexValue") == null) {
      if (jiaoyubeijing == null) {
        jiaoyubeijing = {};
      }
      jiaoyubeijing.educational.push(values);
      console.log(jiaoyubeijing);
      window.localStorage.setItem(
        "jiaoyubeijing",
        JSON.stringify(jiaoyubeijing)
      );
      window.localStorage.setItem("JYBG", JSON.stringify(values));
    }
  }
  //   router.back();
};
const router = useRouter();
const route = useRoute();
</script>
<style scoped lang='less'>
h1 {
  font-size: 18px;
  padding: 10px;
}
</style>

这个是把数据存到本地上了，真实项目需要通过接口去传递数据，原理是一样的


文章标签：
JavaScript
UED
关键词：
vue3 ts VUE.js
ts VUE.js
vue3 input VUE.js
input VUE.js
vant3 VUE.js
SouthernWind
目录
相关文章
光明顶阳顶天
|
21天前
|
缓存 JavaScript UED
Vue3中v-model在处理自定义组件双向数据绑定时有哪些注意事项？
在使用`v-model`处理自定义组件双向数据绑定时，要仔细考虑各种因素，确保数据的准确传递和更新，同时提供良好的用户体验和代码可维护性。通过合理的设计和注意事项的遵循，能够更好地发挥`v-model`的优势，实现高效的双向数据绑定效果。
光明顶阳顶天
126 64
mao29955
|
21天前
|
前端开发 JavaScript 测试技术
Vue3中v-model在处理自定义组件双向数据绑定时，如何避免循环引用？
Web 组件化是一种有效的开发方法，可以提高项目的质量、效率和可维护性。在实际项目中，要结合项目的具体情况，合理应用 Web 组件化的理念和技术，实现项目的成功实施和交付。通过不断地探索和实践，将 Web 组件化的优势充分发挥出来，为前端开发领域的发展做出贡献。
mao29955
28 8
mao29955
|
21天前
|
存储 JavaScript 数据管理
除了provide/inject，Vue3中还有哪些方式可以避免v-model的循环引用？
需要注意的是，在实际开发中，应根据具体的项目需求和组件结构来选择合适的方式来避免`v-model`的循环引用。同时，要综合考虑代码的可读性、可维护性和性能等因素，以确保系统的稳定和高效运行。
mao29955
21 1
mao29955
|
21天前
|
JavaScript
Vue3中使用provide/inject来避免v-model的循环引用
`provide`和`inject`是 Vue 3 中非常有用的特性，在处理一些复杂的组件间通信问题时，可以提供一种灵活的解决方案。通过合理使用它们，可以帮助我们更好地避免`v-model`的循环引用问题，提高代码的质量和可维护性。
mao29955
32 1
光明顶阳顶天
|
21天前
|
JavaScript
在 Vue 3 中，如何使用 v-model 来处理自定义组件的双向数据绑定？
需要注意的是，在实际开发中，根据具体的业务需求和组件设计，可能需要对上述步骤进行适当的调整和优化，以确保双向数据绑定的正确性和稳定性。同时，深入理解 Vue 3 的响应式机制和组件通信原理，将有助于更好地运用 `v-model` 实现自定义组件的双向数据绑定。
光明顶阳顶天
39 2
程序员彭于晏
|
25天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
28 1
大树营养快线
|
27天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
31 2
阿里巴巴叫我来巡山
|
1天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统，提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性，实现用户友好的界面，方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构，确保稳定性和多功能模块设计，涵盖管理员和用户功能模块，促进物品循环使用，降低开销，提升环保意识，助力绿色校园文化建设。
阿里巴巴叫我来巡山
34 17
雨溪-yuxi
|
28天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
32 1
vue学习第一章
雨溪-yuxi
|
28天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
26 1
vue学习第三章

热门文章

最新文章

  • 1
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 2
    Vue使用vue-3d-model组件预览3D三维文件、立体文件，支持旋转、自动播放
  • 3
    Nestjs+Vue实现阿里云OSS服务端签名直传
  • 4
    基于Serverless函数计算FC一键搭建VUE3.0脚手架
  • 5
    vue之webpack打包原理和用法详解
  • 6
    全栈开发实战｜​人事管理系统的设计与实现（Spring Boot + Vue 3 + MyBatis）
  • 7
    浏览器垃圾回收机制与 Vue 项目内存泄漏分析
  • 8
    中文代码示例之Vuejs入门教程(一)
  • 9
    Vue3——使用inject和provide对页面进行刷新
  • 10
    新建Vue项目
  • 1
    使用Vue.js构建交互式前端的技术探索
    88
  • 2
    ruoyi-nbcio-plus基于vue3的flowable为了适配文件上传改造VForm3的代码记录
    164
  • 3
    vue2升级到vue3的一些使用注意事项记录(四）
    132
  • 4
    ruoyi-nbcio-plus基于vue3的flowable收回任务后重新进行提交表单的处理
    149
  • 5
    ruoyi-nbcio-plus基于vue3的flowable多租户机制
    180
  • 6
    ruoyi-nbcio-plus基于vue3的flowable的消息中心我的消息的升级修改
    103
  • 7
    vue3中使用动态组件
    102
  • 8
    Vue 3 中 ＜transition-group＞ 组件报错的非 props 属性传递问题
    141
  • 9
    ruoyi-nbcio-plus基于vue3的flowable的自定义业务显示历史信息组件的升级修改
    76
  • 10
    ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
    120

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • JS 语言在引擎级别的执行过程

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
    • 下一篇
    阿里云oss存储简介和如何使用