emelemt组件常见所需数据格式

常见的组件通常会使用 对象 或 数组 来传递数据或配置选项。以下是我为你总结的一些常用组件及其使用的数据类型（对象 vs 数组）：

1. 表格（el-table）

• 需要数组：

  • data: 表格数据，通常是一个 数组，包含每一行的数据。
    html复制代码

    <el-table :data="tableData">
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
    </el-table>
    

    tableData 是一个数组，每个元素表示表格中的一行数据。
  • 示例：
    javascript复制代码

    data() {
      return {
        tableData: [
          { name: 'John', age: 30 },
          { name: 'Jane', age: 25 },
        ]
      };
    }
    

• 需要对象：

  • columns: 每一列的配置，通常是一个 数组 对象，可以定义每一列的标题、字段等属性。
  • 但通常 el-table-column 是嵌套在 el-table 中的，因此它的配置本身可能看起来像一个 对象。
  html复制代码

  <el-table :data="tableData">
    <el-table-column label="姓名" prop="name"></el-table-column>
    <el-table-column label="年龄" prop="age"></el-table-column>
  </el-table>
  

2. 表单（el-form）

• 需要对象：

  • model: 表单的数据对象，用来双向绑定表单元素的值。

  • rules: 表单验证规则，通常是一个 对象，字段作为 key，验证规则作为 value。

    html复制代码

    <el-form :model="formData" :rules="formRules" ref="formRef">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="formData.name"></el-input>
      </el-form-item>
    </el-form>
    

  • 示例：

    javascript复制代码

    data() {
      return {
        formData: { name: '', age: 25 },
        formRules: {
          name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
          age: [{ type: 'number', required: true, message: '请输入年龄', trigger: 'blur' }]
        }
      };
    }
    

3. 分页（el-pagination）

• 需要对象：

  • pagination：管理当前页、每页显示的条数和总记录数等的分页信息，通常是一个 对象。

    html复制代码

    <el-pagination
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange">
    </el-pagination>
    

  • 示例：

    javascript复制代码

    data() {
      return {
        pagination: { currentPage: 1, pageSize: 10, total: 100 }
      };
    }
    

• 需要数组：

  • page-sizes：允许的每页显示条数的选项，通常是一个 数组。
  • 示例：
    html复制代码

    <el-pagination
      :page-sizes="[10, 20, 50, 100]"
      :current-page="pagination.currentPage"
      :page-size="pagination.pageSize"
      :total="pagination.total"
      @size-change="handleSizeChange"
      @current-change="handlePageChange">
    </el-pagination>
    

4. 选择器（el-select）

• 需要数组：

  • options: 选择项的数据，通常是一个 数组，包含选项对象。

    html复制代码

    <el-select v-model="selectedValue" placeholder="请选择">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value">
      </el-option>
    </el-select>
    

  • 示例：

    javascript复制代码

    data() {
      return {
        selectedValue: null,
        options: [
          { label: '选项1', value: '1' },
          { label: '选项2', value: '2' },
          { label: '选项3', value: '3' },
        ]
      };
    }
    

5. 弹窗（el-dialog）

• 需要对象：

  • 弹窗的显示状态（例如是否可见），通常用一个 对象 来管理。

  • 例如，通过 v-model 控制弹窗的显示和隐藏状态。

    html复制代码

    <el-dialog v-model="dialogVisible" title="标题">
      <span>这里是内容</span>
    </el-dialog>
    

  • 示例：

    javascript复制代码

    data() {
      return {
        dialogVisible: false
      };
    }
    

6. 通知（el-notification）

• 需要对象：
  • 配置项，通常通过对象传递，可以包括通知的内容、标题、类型等。
    javascript复制代码

    this.$notify({
      title: '提示',
      message: '这是一条通知',
      type: 'success'
    });
    

7. 进度条（el-progress）

• 需要对象：

  • 进度条的配置，通常是一个 对象，包含进度值、颜色、状态等。

    html复制代码

    <el-progress :percentage="progressPercentage" :color="progressColor"></el-progress>
    

  • 示例：

    javascript复制代码

    data() {
      return {
        progressPercentage: 50,
        progressColor: 'success'
      };
    }
    

8. 树形控件（el-tree）

• 需要数组：

  • data: 树形控件的数据，通常是一个 数组，表示树的节点数据。

    html复制代码

    <el-tree :data="treeData" :props="defaultProps"></el-tree>
    

  • 示例：

    javascript复制代码

    data() {
      return {
        treeData: [
          {
            label: 'Level one',
            children: [
              { label: 'Level two' },
              { label: 'Level two' }
            ]
          }
        ],
        defaultProps: {
          children: 'children',
          label: 'label'
        }
      };
    }
    

总结

组件	需要 对象	需要 数组
表格 (el-table)	columns（列配置）	data（表格数据）
表单 (el-form)	model（表单数据），rules（表单验证规则）
分页 (el-pagination)	pagination（分页信息）	page-sizes（每页显示条数选项）
选择器 (el-select)		options（选项列表）
弹窗 (el-dialog)	弹窗的显示状态（通过 v-model 控制）
通知 (el-notification)	通知配置（如标题、消息、类型等）
进度条 (el-progress)	进度条配置（如 percentage，color）
树形控件 (el-tree)		data（树形节点数据）

小结：

• 对象 主要用于管理组件的状态、配置或传递结构化的数据（如表单模型、分页信息、弹窗状态等）。
• 数组 主要用于传递动态数据（如表格数据、选项列表、树形结构等）。