vue2使用笔记

1.el-row

每行使用标签标识，然后每行内的列使用标识，至于每列整行的宽度比例，则使用:span属性进行设置，每行划分为24个分栏。

<el-row>
  <el-col :span="12">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name" disabled placeholder="请输入姓名" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="电话" prop="tel">
      <el-input v-model="form.tel" disabled placeholder="请输入电话" />
    </el-form-item>
  </el-col>
</el-row>

:gutter设置分栏之间的距离，注：需要在分栏里面新增元素，才能实现分栏间隔
el-col中新增了el-form-item元素

<el-row :gutter="90">
  <el-col :span="12">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name1" disabled placeholder="请输入姓名" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="电话" prop="tel">
      <el-input v-model="form.tel1" disabled placeholder="请输入电话" />
    </el-form-item>
  </el-col>
</el-row>

2.父组件直接获取子组件的属性值

父组件

<el-form-item label="内容">
  <QlEditor v-model="form.content" ref="qlEditorRef" :min-height="192"/>
</el-form-item>

<script>
/** 提交按钮 */
submitForm() {
  this.$refs["form"].validate(valid => {
    this.form.content=this.$refs.qlEditorRef.content;
  });
},
</script>

子组件

<template>
  <div>
   <quill-editor class="editor" v-model="content"> </quill-editor>
  </div>
</template>

<script>
data(){
    return {
      content:'',
	}
}
<script>

3.toLocaleString函数的使用，将数字用逗号分隔，数组处理，日期处理

https://blog.csdn.net/lyx1838102537/article/details/130574690