Vue3 は v-for を使用して、オンデマンドで複数選択ボックスのボタンをトラバースします

序文

• ビュー 3
• 糖衣構文のセットアップ
• v-オンデマンドのトラバースの場合
• リクエストを開始するかどうかを決定するためにデータを 2 回記録する diff アルゴリズム
• ソースデータのコンテンツトラバーサルのオンデマンド抽出

---

1.テンプレート

//template
    <div>
      <h1>学习遍历多选框按钮,按需求v-for</h1>
      <a-form ref="sysForm" :model="info" :label-col="{ span: 8 }" :wrapper-col="{ span: 8 }">
        <a-form-item :label="服务" :wrapper-col="{ span: 16 }">
          <a-checkbox
            v-for="(s, index) in svctbl"
            :key="index"
            v-model:checked="info[s.dataIndex]"
            >{
    
    {
    
     s.label }}</a-checkbox
          >
        </a-form-item>
        <a-button type="primary" @click="onclick('apply')">Apply</a-button>
        <a-button type="danger" @click="onclick('reset')">Reset</a-button>
      </a-form>
    </div>

2.セットアップ

//setup js
<script setup lang="ts">
  import {
    
     getCurrentInstance, computed, ref, onMounted } from 'vue';
  import Child from './Child.vue';
  import {
    
     useI18n } from '/@/hooks/web/useI18n';
  const {
    
     t } = useI18n();
  const currentInstance = getCurrentInstance();
  const child = ref(null);
  const emitsData = ref(null);
  const exposeData2 = ref(null);
  const defSvctbl = [
    {
    
     label: 'telnet', dataIndex: 'telnet' },
    {
    
     label: 'ssh', dataIndex: 'ssh' },
    {
    
     label: 'http', dataIndex: 'http' },
    {
    
     label: 'https', dataIndex: 'https' },
  ];
  const svctbl = computed(() => defSvctbl);
  /* //判断a中是否有属性b，如果有则是取value_1的值，若没有则筛选value_1中除了b以外所有的值（可以用来判断不同前提下的环境）
   const svctbl = computed(() =>
    a?.b ? value_1 : value_1.filter((s) => s.dataIndex !== 'b'),
  ); */

  // 对比算法
  function shallowDiff(newObj, orgObj) {
    
    
    // console.log('new %o, org %o', newObj, orgObj);
    if (!newObj || !orgObj) return newObj;
    const res = Object.keys(newObj)
      .filter((k) => typeof newObj[k] !== 'object')
      .filter((k) => newObj[k] !== orgObj[k])
      .reduce((acc, k) => ({
    
     ...acc, [k]: newObj[k] }), {
    
    });
    // console.log('res ', res);
    return res;
  }
  const info = ref({
    
    });
  let orgInfo = {
    
    }; //初始值
  const sysForm = ref();
  function refresh() {
    
    
    let data = {
    
    
      telnet: false,
      https: true,
      ssh: false,
      http: true,
    };
    info.value = {
    
     ...data };
    orgInfo = JSON.parse(JSON.stringify({
    
     ...data }));
    info.value = {
    
     ...data };
  }
  async function onclick(type) {
    
    
    if (type === 'reset') {
    
    
      sysForm.value.clearValidate();
      info.value = JSON.parse(JSON.stringify(orgInfo));
      return;
    }
    if (type === 'apply') {
    
    
      try {
    
    
        await sysForm.value.validateFields();
        let diff = shallowDiff(info.value, orgInfo);
        // const mgmtDiff = shallowDiff(info.value.mgmtinfo, orgInfo.mgmtinfo);
        // if (Object.keys(mgmtDiff).length || diff.mgmtip === true)
        // diff.mgmtinfo = info.value.mgmtinfo;
        console.log('[config] diff %o, mgmtDiff %o', diff);
        Object.keys(diff).length && console.log('修改成功');
        refresh();
      } catch {
    
    }
      return;
    }
  }
  onMounted(() => {
    
    
    refresh();
  });
  function show() {
    
    
    child.value.alertMessage();
    exposeData2.value = child.value.message;
    console.log(child.value.message);
  }
  function recState(e) {
    
    
    emitsData.value = e;
    console.log('收到子组件child通过emits传来的数据', e);
  }
</script>

3. 効果

• データが変更されるとdiffアルゴリズムが呼び出されて判定され、初期内容と相違がある場合はApplyを押して次のステップに進みます。
• 変更後、変更したインターフェースを送信し、変更したコンテンツを再更新します。
  

---