实习日记 5/25

记录：

完成功能：

// 点击彻底删除按钮
        } else if (action === 'delete') {
          this.$confirm({
            title: this.$t('instanceRecycle.deleteTitle', { name: data.instanceName }),
            // 这里confirm中有checkbox，所以处理逻辑略有不同
            message: h('div', null, [
              this.$t('instanceRecycle.deleteMsg'),
              h('br'),
              h('confirm-checkbox', {
                // 这里要加一下key，否则虚拟DOM会对渲染有影响
                key: 'diskAlsoDelete' + new Date().getTime(),
                props: {
                  initChecked: data.hasAttachDisk && data.nacStatus !== 'unfounded',
                  // 如果不存在手动挂载的云硬盘，则初始置为false，且不可勾选
                  disabled: !data.hasAttachDisk || data.nacStatus === 'unfounded',
                  name: 'diskAlsoDelete',
                  disabledTips: this.$t('instanceRecycle.noDisk', { name: data.instanceName })
                }
              }, this.$t('instanceRecycle.diskAlsoDelete')),
              h('br'),
              h('confirm-checkbox', {
                // 这里要加一下key，否则虚拟DOM会对渲染有影响
                key: 'floatingIpAlsoDelete' + new Date().getTime(),
                props: {
                  initChecked: data.hasFloatingIp && data.nacStatus !== 'unfounded',
                  // 如果不存在浮动IP，则初始置为false，且不可勾选
                  disabled: !data.hasFloatingIp || data.nacStatus === 'unfounded',
                  name: 'floatingIpAlsoDelete',
                  disabledTips: this.$t('instanceRecycle.noFloatingIp', { name: data.instanceName })
                }
              }, this.$t('instanceRecycle.floatingIpAlsoDelete'))
            ].slice(0, isEdgeEcs ? 4 : 5)),  //因为不是模板所以要用js的办法实现条件渲染

数组截取的办法实现条件判断渲染