console 命令行工具 X clear

console

new Vue({
    el: '#app',
    data() {
        return {
            startIndex: 0,
            list: []
        };
    },
    created() {
        for (let i = 0; i < 10000; i++) {
            this.list.push({
                id: 1,
                name: 'name' + i,
                createTime: '2018-09-09'
            })
        }
    },
    computed: {
        limitCount() {
            return 300 / 40 + 2;
        },
        splitData() {
            return this.list.slice(this.startIndex, this.startIndex + this.limitCount)
        }
    },
    methods: {
        scroll() {
            // 根据滚动的距离，估算出这个滚动位置对应的数组序列，例如滚动100px，每条40px，对应第3条
            let scrollTop = this.$refs.scrollDom.scrollTop;
            this.startIndex = Math.floor(scrollTop / 40);
        }
    },

})

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dynamic Form with Vue 2</title>
  <!-- Element UI CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- Vue Form Generator CSS -->
  <link rel="stylesheet" href="https://unpkg.com/vue-form-generator/dist/vfg.css">
</head>
<body>
  <div id="app">
    <dynamic-form></dynamic-form>
  </div>

  <!-- Vue 2 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <!-- Element UI JS -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- Vue Form Generator -->
  <script src="https://unpkg.com/vue-form-generator/dist/vfg.js"></script>

  <script>
    // // 注册 Element UI
    // Vue.use(ElementUI);

    // // 注册 vue-form-generator
    // Vue.component('vue-form-generator', VueFormGenerator.default);

    // 定义动态表单组件
    Vue.component('dynamic-form', {
      template: `
        <div>
          <el-button @click="toggleForm" type="primary" style="margin-bottom: 20px;">切换表单形式</el-button>

          <!-- 使用 vue-form-generator 的表单 -->
          <div v-if="useVueFormGenerator">
            <vue-form-generator
              :schema="schema"
              :model="formData"
              :options="formOptions"
              ref="form"
            ></vue-form-generator>
          </div>

          <!-- 使用 Element UI 的表单 -->
          <div v-else>
            <el-form :model="formData" label-width="120px">
              <el-form-item label="姓名">
                <el-input v-model="formData.name"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="formData.gender">
                  <el-radio label="male">男</el-radio>
                  <el-radio label="female">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="兴趣爱好（多选）">
                <el-checkbox-group v-model="formData.hobbies">
                  <el-checkbox label="reading">阅读</el-checkbox>
                  <el-checkbox label="sports">运动</el-checkbox>
                  <el-checkbox label="music">音乐</el-checkbox>
                  <el-checkbox label="travel">旅行</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="出生日期">
                <el-date-picker v-model="formData.birthDate" type="date" placeholder="选择日期"></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm">提交</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      `,
      data() {
        return {
          useVueFormGenerator: true, // 控制表单形式
          formData: {
            name: '张三',
            gender: 'male',
            hobbies: ['reading', 'sports'],
            birthDate: new Date(1990, 1, 1),
          },
          schema: {
            fields: [
              {
                type: 'input',
                inputType: 'text',
                label: '姓名',
                model: 'name',
                placeholder: '请输入您的姓名',
              },
              {
                type: 'radio',
                label: '性别',
                model: 'gender',
                values: [
                  { id: 'male', name: '男' },
                  { id: 'female', name: '女' },
                ],
                default: 'male',
              },
              {
                type: 'checkbox',
                label: '兴趣爱好（多选）',
                model: 'hobbies',
                values: [
                  { id: 'reading', name: '阅读' },
                  { id: 'sports', name: '运动' },
                  { id: 'music', name: '音乐' },
                  { id: 'travel', name: '旅行' },
                ],
                default: ['reading', 'sports'],
              },
              {
                type: 'date',
                label: '出生日期',
                model: 'birthDate',
              },
            ],
          },
          formOptions: {
            validateAfterLoad: true,
            validateAfterChanged: true,
          },
        };
      },
      methods: {
        toggleForm() {
          this.useVueFormGenerator = !this.useVueFormGenerator;
          if (!this.useVueFormGenerator) {
            // 当切换到 Element UI 表单时，手动同步数据
            this.$nextTick(() => {
              this.formData = { ...this.formData };
            });
          } else {
            // 当切换回 vue-form-generator 时，手动同步数据
            this.$refs.form.model = { ...this.formData };
          }
        },
        submitForm() {
          console.log('提交的表单数据:', this.formData);
        },
      },
    });

    // 创建 Vue 实例
    new Vue({
      el: '#app',
    });
  </script>
</body>
</html>

        .content-inner {
            display: flex;
        }
        .content-center {
            /* display: flex */
        }
        .dw-mian {
            display: flex
        }