Vue例子|Candy的小破站

<br />添加换行

<el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="date" label="日期" width="180"> </el-table-column>
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
</el-table>

<el-table>: 创建一个表格组件
:data="tableData": 这个绑定将表格的数据源设置为Vue实例的tableData属性。在Vue实例的data选项中定义tableData，并为其提供一个数组，数组中的每个对象代表一行数据。
border: 这个属性让表格带有边框样式。
style="width: 100%": 表格宽度设置为其父元素的100%，实现全宽显示。
<el-table-column>: 每个el-table-column定义了表格的一列，主要属性有：
- prop: 列数据的字段名，对应tableData数组中对象的键。
- label: 列头显示的文本。
- width: 列的宽度，可选。

<el-pagination background layout="total,sizes, prev, pager, next, jumper" 
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
     :total="1000">
</el-pagination>

<el-pagination>创建一个分页组件
background: 这个属性给分页组件添加背景色，使其更符合UI设计。
layout: 定义了分页组件的布局，包含以下元素：
- total: 显示总条目数。
- sizes: 显示每页大小选择器（多少条一页）。
- prev: 上一页按钮。
- pager: 数字页码。
- next: 下一页按钮。
- jumper: 跳转页码输入框。
:total="1000": 绑定总的记录数，这里是1000条。
@size-change="handleSizeChange": 当用户改变每页大小时触发的事件（多少条一页）。
@current-change="handleCurrentChange": 当当前页码改变时触发的事件。

<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>

    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="date" label="日期" width="150"></el-table-column>
        <el-table-column property="name" label="姓名" width="200"></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>

        <el-table-column label="图像" width="180">
             <template slot-scope="scope">
                     <img :src="scope.row.image" width="100px" height="70px">
             </template>
        </el-table-column>

        <el-table-column label="性别" width="140">
              <template slot-scope="scope">
                      {{scope.row.gender == 1 ? '男':'女'}}
              </template>
        </el-table-column>
      </el-table>
    </el-dialog>

<el-button>: 创建一个按钮，类型为文本按钮（type="text"）。
- @click="dialogTableVisible = true": 当点击按钮时，将dialogTableVisible的值设置为true，显示对话框。
<el-dialog>: 创建一个对话框组件。
- title="收货地址": 对话框的标题。
- :visible.sync="dialogTableVisible": 对话框的可见性绑定到Vue实例的dialogTableVisible属性，使用.sync修饰符意味着当dialogTableVisible改变时，对话框的可见状态也会同步更新。
<template slot-scope="scope"> 是一个槽（slot）模板，用于自定义列的内容。slot-scope="scope" 表示当前上下文包含了表格每一行的数据，可以通过 scope.row 访问，不用指定property属性。

<el-button type="text" @click="dialogFormVisible = true">打开嵌套Form的 Dialog</el-button>

    <el-dialog title="Form表单" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="活动区域">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="活动时间">
          <el-col :span="11">
            <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
          </el-col>

          <el-col class="line" :span="2">-</el-col>

          <el-col :span="11">
            <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
          </el-col>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

<el-form>: 创建一个表单组件，ref="form"用于在Vue实例中通过this.$refs.form访问，:model="form"将表单数据绑定到form对象，label-width="80px"设置表单标签的宽度。
<el-form-item>: 表单中的各个字段。
- label: 字段的标签文本。
- v-model: 双向数据绑定，将表单字段与form对象中的属性关联。
<el-input>: 创建一个输入框，v-model绑定到form.name输入的值会传到form.name中
<el-select>: 创建一个下拉选择框，v-model绑定到form.region，包含两个选项。
<el-date-picker> 和 <el-time-picker>: 分别用于选择日期和时间，v-model分别绑定到form.date1和form.date2。
<el-col>: 使用Element UI的栅格系统调整元素的布局。
<el-button>: 创建两个按钮，一个用于提交表单（调用onSubmit方法），另一个用于取消操作。

<div>
        <el-container  style="height: 700px; border: 1px solid #eee">
            <el-header style="font-size:40px; background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统</el-header>
            <el-container>

                <el-aside width="230px" style="border: 1px solid #eee">
                    <el-menu :default-openeds="['1', '3']">
                        <el-submenu index="1">
                            <template slot="title"><i class="el-icon-message"></i>系统信息管理</template>
                            <el-menu-item index="1-1">部门管理</el-menu-item>
                            <el-menu-item index="1-2">员工管理</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>


                <el-main>
                    
                </el-main>

            </el-container>
        </el-container> 
</div>

外层容器:
- <el-container> 作为最外层的容器，设置了一个700px的高度和1px的灰色边框，提供了一个整体的框架。
页眉（Header）:
- <el-header> 用于页面的顶部部分，设置字体大小为40px，背景色为淡灰色。显示的文字是“tlias 智能学习辅助系统”。
内部容器:
- 再次使用 <el-container> 创建一个内部的容器，用于实现两栏布局。
侧边栏（Aside）:
- <el-aside> 定义了左侧的侧边栏，宽度为230px，同样有一条1px的灰色边框。
- <el-menu> 是一个导航菜单，:default-openeds="['1', '3']" 表示默认展开索引为'1'和'3'的子菜单（尽管当前只有一个子菜单，索引为'1'）。
- <el-submenu> 创建了一个子菜单，索引为'1'。
- <template slot="title"> 是Vue中使用插槽机制的一个例子，允许自定义组件的某个部分。这里的 slot="title" 指定了这个模板是用来替换 <el-submenu> 的默认标题部分。
- <i class="el-icon-message"></i> 是Element UI的图标组件，这里使用的是“消息”图标。Element UI提供了一套图标库，可以通过类名 el-icon-XXX 来引用不同的图标，message 是其中一个图标名称。
- 系统信息管理 是标题的文本内容，紧跟在图标后面，共同构成了子菜单的标题。
- 子菜单包含两个菜单项，分别用 <el-menu-item> 表示，索引为'1-1'和'1-2'，内容为“部门管理”和“员工管理”。
主要内容区域（Main）:
- <el-main> 代表页面的主要内容区域，目前是空的。通常会在这里添加表格、表单、卡片或其他组件来展示主要的页面内容

Ajax和Axios

LeetCode121：买卖股票的最佳时机

陈陈陈xy