vue string类型“2,1,3,”放到数组里，以[2,1,3]的形式

可以使用字符串的split()方法将字符串以逗号为分隔符转换成数组，然后再使用map()方法将每个元素转换成数字类型。

代码如下：

let str = "2,1,3,"
let arr = str.split(',').map(Number).filter(Boolean)
console.log(arr) //[2,1,3]

其中，map(Number)是将每个元素转换成数字类型，filter(Boolean)是去除数组中的空元素。

相关问题

用vue2写一个课程表

好的，以下是一个简单的基于 Vue2 的课程表示例：

1. 首先，在你的 Vue 项目中安装 `vue-tables-2` 和 `moment` 库：

   npm install vue-tables-2 moment --save

2. 创建一个 `CourseTable.vue` 组件：

   <template>
     <div class="course-table">
       <h2>{{ title }}</h2>
       <vue-tables-2 :data="tableData" :columns="columns" :options="options"></vue-tables-2>
     </div>
   </template>

   <script>
   import moment from 'moment'

   export default {
     name: 'CourseTable',
     props: {
       title: {
         type: String,
         default: 'Course Table'
       },
       courses: {
         type: Array,
         required: true
       }
     },
     data() {
       return {
         columns: ['time', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat', 'sun'],
         options: {
           headings: {
             time: 'Time'
           },
           filterable: false,
           sortable: false,
           perPage: 24,
           perPageValues: [12, 24],
           pagination: {
             dropdown: true,
             chunk: 5
           }
         },
         tableData: []
       }
     },
     mounted() {
       this.tableData = this.generateTableData()
     },
     methods: {
       generateTableData() {
         const tableData = []
         for (let i = 0; i < 24; i++) {
           const row = {
             time: `${i}:00 - ${i + 1}:00`
           }
           const courses = this.courses.filter(course => {
             const startTime = moment(course.startTime, 'HH:mm')
             const endTime = moment(course.endTime, 'HH:mm')
             return startTime.hours() <= i && endTime.hours() > i
           })
           courses.forEach(course => {
             row[course.weekday.toLowerCase()] = course.name
           })
           tableData.push(row)
         }
         return tableData
       }
     }
   }
   </script>

   <style>
   .course-table {
     margin: 20px;
   }
   </style>

3. 在你的父组件中使用 `CourseTable` 组件：

   <template>
     <div>
       <course-table :courses="courses"></course-table>
     </div>
   </template>

   <script>
   import CourseTable from './CourseTable.vue'

   export default {
     name: 'App',
     components: {
       CourseTable
     },
     data() {
       return {
         courses: [
           { name: 'Math', startTime: '08:00', endTime: '09:30', weekday: 'Mon' },
           { name: 'English', startTime: '10:00', endTime: '11:30', weekday: 'Tue' },
           { name: 'History', startTime: '13:00', endTime: '14:30', weekday: 'Wed' },
           { name: 'Chemistry', startTime: '15:00', endTime: '16:30', weekday: 'Thu' },
           { name: 'Physics', startTime: '16:00', endTime: '17:30', weekday: 'Fri' }
         ]
       }
     }
   }
   </script>

这个示例中，我们使用 `vue-tables-2` 来渲染数据表格，并且使用 `moment` 来处理时间。`CourseTable` 组件接受一个 `courses` 属性，它是一个包含课程信息的数组。在 `mounted` 钩子中，我们生成了一个二维数组 `tableData`，它包含了每个小时的表格行。对于每个课程，我们将其名称放到对应的时间和星期几的单元格中。最后，我们在模板中使用 `vue-tables-2` 组件来渲染这个二维数组。

ant-design-vue3.0 如何自定义表单校验错误显示

### 回答1：
在 ant-design-vue3.0 中，我们可以通过自定义表单校验错误显示来实现我们想要的效果。首先，我们需要在表单项中定义校验规则，并给每个表单项添加一个唯一的 `name` 属性。例如：

<a-form-item label="用户名" name="username" rules={[{ required: true, message: '请输入用户名' }]}>
  <a-input v-model:value="formData.username"></a-input>
</a-form-item>

接下来，我们可以在表单的 `validateTrigger` 属性中指定触发校验的时机。默认情况下，它的值为 `change` 和 `blur`，即在表单项失去焦点或值改变时触发校验。我们可以将它修改为 `submit`，表示只有在提交表单的时候才触发校验。

<a-form ref="formRef" :model="formData" :validateTrigger="'submit'">
  <!-- 表单项 -->
</a-form>

当表单校验失败时，默认情况下会在表单项下方显示错误信息。我们可以通过 `validateStatus` 和 `help` 属性来自定义错误显示。`validateStatus` 可以接受三种值：`'success'` 表示校验通过，`'error'` 表示校验失败，`'validating'` 表示校验中。我们可以根据需要设置不同的显示效果。

<a-form-item label="用户名" name="username" :validateStatus="validateStatus('username')" :help="errorMessages['username']">
  <a-input v-model:value="formData.username"></a-input>
</a-form-item>

其中，`validateStatus` 是一个方法，用于根据校验结果返回对应的状态值。`errorMessages` 是一个对象，保存所有的错误信息。

data() {
  return {
    formData: {
      username: ''
    },
    errorMessages: {} // 错误信息
  }
},
methods: {
  validateStatus(name) {
    if (this.errorMessages[name]) {
      return 'error';
    }
    return '';
  }
}

最后，我们需要在提交表单时手动触发校验，并捕获校验结果，并将错误信息保存到 `errorMessages` 中。

methods: {
  submitForm() {
    this.$refs.formRef.validate((valid) => {
      if (valid) {
        // 校验通过，提交表单
      } else {
        // 校验失败，显示错误信息
        this.errorMessages = this.$refs.formRef.getFieldsError().reduce((acc, {name, errors}) => {
          if (errors.length > 0) {
            acc[name] = errors[0].message;
          }
          return acc;
        }, {});
      }
    });
  }
}

通过以上步骤，我们就可以实现自定义表单校验错误显示。在校验失败时，表单项下方会显示我们设置的错误信息，而不是默认的错误提示。

### 回答2：
在 ant-design-vue 3.0 中，可以通过使用自定义校验规则和错误信息来自定义表单校验错误显示。

首先，创建一个自定义的校验规则函数。校验规则函数需要接受两个参数：rule 和 value。rule 代表当前校验规则的配置，而 value 代表当前表单字段的值。在校验函数中，可以根据具体的校验逻辑进行判断并返回一个校验结果。校验结果可以返回一个布尔值或一个 Promise 对象。

接着，在需要进行校验的表单控件中，可以使用 rules 属性来指定校验规则函数或校验规则数组。如果是多个校验规则，可以将它们放入数组中。可以通过 message 属性来设置错误提示信息。

例如，我们需要自定义一个校验规则，判断输入的字符串是否包含特定字符。可以创建一个函数 validateSpecialChar，接受 rule 和 value 作为参数，根据具体需求进行判断，并返回一个校验结果。

const validateSpecialChar = (rule, value) => {
  if (/[@#$%^&*]/.test(value)) {
    return Promise.reject(new Error('不能包含特殊字符'));
  }
  return Promise.resolve();
};

然后，在表单控件中，可以指定 rules 属性来使用这个校验规则，并设置错误提示信息。

<a-form-item label="用户名" required>
  <a-input v-decorator="['username', { rules: [{ validator: validateSpecialChar, message: '不能包含特殊字符' }] }]"></a-input>
</a-form-item>

当用户输入的字符串中包含特殊字符时，会显示错误提示信息"不能包含特殊字符"。如果输入合法，则不显示错误提示信息。

通过这种方式，我们可以方便地自定义表单校验错误的显示方式。根据具体需求，可以自定义不同的校验规则函数和错误提示信息来满足不同的校验需求。

### 回答3：
在Ant Design Vue 3.0中，默认的表单校验错误显示是使用Tooltip组件，在表单控件的右上方显示错误提示信息。如果需要自定义表单校验错误显示，可以通过以下步骤实现：

1. 创建自定义的错误提示组件：可以使用Message组件或者其他任意组件作为错误提示的样式，根据具体需求进行定制。

<template>
  <div class="custom-error">
    <span class="error-message">{{ errorMessage }}</span>
  </div>
</template>

<script>
export default {
  name: 'CustomError',
  props: {
    errorMessage: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
.custom-error {
  /* 自定义样式 */
}

.error-message {
  /* 自定义样式 */
}
</style>

2. 在表单组件中使用自定义的错误提示组件。在需要进行校验的表单控件外部包裹一层`FormItem`组件，并通过`rules`属性设置校验规则，在`validateStatus`属性中根据校验结果设置表单控件的状态，如果校验失败，将错误信息通过`error-message`属性传给自定义错误提示组件。

<template>
  <a-form :form="form">
    <a-form-item label="用户名" :validateStatus="validateStatus('username')" :help="helpMessage('username')">
      <a-input v-model="username" />
    </a-form-item>
  </a-form>
</template>

<script>
import CustomError from '@/components/CustomError.vue';

export default {
  name: 'MyForm',
  components: {
    CustomError
  },
  data() {
    return {
      form: this.$form.createForm(this),
      username: ''
    };
  },
  methods: {
    validateStatus(fieldName) {
      const { isFieldTouched, getFieldError } = this.form;
      return isFieldTouched(fieldName) && getFieldError(fieldName) ? 'error' : '';
    },
    helpMessage(fieldName) {
      const { isFieldTouched, getFieldError } = this.form;
      return isFieldTouched(fieldName) && getFieldError(fieldName) ? getFieldError(fieldName)[0] : '';
    }
  }
}
</script>

3. 构建校验规则：根据具体需求，使用`rules`属性定义校验规则，可以使用Ant Design Vue提供的校验规则或者自定义校验规则。

<script>
export default {
  // ...
  methods: {
    validateStatus(fieldName) {
      // ...
    },
    helpMessage(fieldName) {
      // ...
    }
  },
  created() {
    this.form.setFields({
      username: {
        rules: [
          { required: true, message: '请输入用户名' },
          { pattern: /^[a-zA-Z0-9_]{5,16}$/, message: '用户名由字母、数字或下划线组成，长度为5-16位' }
        ]
      }
    });
  }
}
</script>

通过以上步骤，我们可以实现自定义表单校验错误显示。可以根据自己的需求，使用不同的组件和样式来进行自定义。