Element UI入门笔记（个人向）

Element UI入门笔记

将页面分割为一级菜单 、二级菜单 、导航栏三个部分；
使用npm下载安装，使用语句npm i element-ui -s;

布局组件

el-form

用于创建和管理表单；
从属性上看：
1. :model ：用于双向数据绑定，将表单的数据模型（script中的脚本）绑定到对象（template中的标签）上；
2. :rules ：用于将表单的校验规则（rules）绑定到对象上；
3. :ref ：用于给表单添加一个引用。这个引用方便在 methods 中使用 \this.$refs.xxx\ 来操作表单；
4. :gutter ：用于设置列之间的间隙 ，尤其是对于<el-col>或者el-row，表示每个行、列之间有多大的间隙；
5. 同样是设置CSS配置，
  1. style：常用于直接设置元素的样式，或者针对单个元素进行一对一的调控；
  2. class：常用于引入可以复用的样式(.css或者<style>中的定义)，代码维护性好；

其标准格式是：

html 复制代码

<template>
    <!--用于创建表单的组件-->
    <!--":model"用于绑定表单数据的对象-->
    <!--":rules"用于定义表单验证规则-->
    <!--"inline"用于设置表单元素是否内联-->
    <!--"size"用于设置表单元素的大小-->
    <el-form :model = "···" :rules = "···" size = "···" inline>
        <!--用于存放表单控件的组件，相当于一行的某一部分，可以存放输入框、选择框、日期选择器等-->
        <!--"label"作为控件组件的标签，用于提供描述，增强用户体验-->
        <!--"prop"：关联父组件的model属性，用于校验-->
        <el-form-item label = "···" prop = "···" rules = "···">
            ····
        </el-form-item>
    </el-form>
</template>

el-tabs

用于创建标签页 （Tab）界面，方便轻松实现多页标签式的内容转换，常用在菜单栏中;

其标准格式是：

html 复制代码

<template>
    <!--作为标签类容器的根元素-->
    <el-tabs>
        <!--单个标签页的内容区域-->
        <el-tab-pane label = "····">
            <!--label设置标签页的标题-->
            ····
        </el-tab-pane>
    </el-tabs>
</template>

el-select
- 用于创建下拉菜单 或者说下拉数据框，在下拉菜单中可以直接选择一个或多个选项，大大简化用户的操作；
- 其常见属性有：
  1. v-model
    - 用于绑定选中的值，值通常存在<script>的data中；
  2. placeholder
    - 显示（默认）没输入时的占位符，用于提示用户要干什么；
  3. disabled
    - 用于禁用一个组件。当元素被禁用时，用户就无法操作该组件；
  4. clearable
    - 通常用于表单元素，例如输入框、下拉框等，它的作用是允许用户通过点击一个特定的图标 （通常是一个"x"号）来清空该表单元素中的内容；
  5. multiple
    - 表示是否支持多选；
  6. filterable
    - 表示是否支持搜索选项；

el-option

要配合上述el-select标签使用。本标签用于定义下拉菜单的每一项内容;

其基本格式是：

html 复制代码

<!--用于创建下拉菜单，v-model用于将下拉框的选中值与Vue实例中的一个数据进行绑定，绑定后数据会双向自动更新-->
<el-select v-model = "">
    <!--v-for用于遍历一个实例data中的数组，动态生成多个下拉选项-->
    <!--:key用于为每一个下拉选项设置唯一的Key值，用于Vue的虚拟DOM的diff算法-->
    <!--:label设置选项要显示的文本信息-->
    <!--:value设置选项选中后给select父组件的传值-->
    <el-option
        v-for = "循环体 in 循环组"  
        :key = "···"
        :label = "···"
        :value = "···"
    />
    <!--常见的属性值选项就是item.value、item.label、item.value，直接通过遍历从实例端取数据-->
</el-select>

之后的循环组可以是data()方法或者data: {}对象的数组，通过键值对的形式存储需要的数据；

el-data-picker

是一个可供选择的日期选择器组件，通过这个组件，用户可以用直观的方式选择一个或多个日期，大大提升了用户体验；

其常见属性是：

v-model
- 用于绑定一个变量，存储用户选中的日期；
type
- 用于设置组件的日期格式，主要包括三种：
  1. date：日期;
  2. datetime：日期+时间;
  3. daterange：时间范围，后面属性应增加开始时间start-placeholder、结束时间(end-placeholder);
format
- 决定日期在输入框中显示的格式，即用户在输入框中看到的是根据format属性格式化后的日期字符串;
value-format
- 决定组件内部存储的 日期值的格式，即与 Vue 实例中的变量进行双向数据绑定传输数据时的格式;

:picker-options

它允许对日期选择器做出更精细的设定，以满足各种需求；

使用格式：

html 复制代码

:picker-options = "{
    <!--"0"是指以星期天作为一周的开始，"1"是指以星期一作为一周的开始-->
    firstDayOfWeek : 0/1
    <!--disabledDate用于禁用自定义的日期，time代表当前选中的时间，return返回true时，该time被禁用-->
    disabledDate(time){
        return 条件表达式
        <!--例如return time.getTime() < Date.now() - 86400000，禁用了不是今天的时间戳，86400000代表一天的毫秒数-->
        <!--例如return time.getTime() < new Date('2023-01-01').getTime()，禁用了2023年以前的日期-->
    }
    minDate ：最小可选择时间
    maxDate ：最大可选择时间
    shortcuts: [{
        <!--快捷选项的名称-->
        text: '···'
        <!--设置点击这个选项后，执行的回调函数-->
        onClick(picker){
            ····
            <!--时间范围例如[start,end]，如果start和end一致，意为选中的是一个时间-->
            <!--对于时间的计算，首先可以用xxx = new date()获取时间，再用xxx.setXXX(xxx.getXXX()时间范围)获得包含时间范围的首尾时间-->
            picker.$emit('pick',时间范围/时间戳)
        }
    }]
}"

range-separator = '···'
- 设定选择的日期范围之间的分隔符，默认是'至'，当然也可以改成别的；
placeholder = "···"
- 占空项内容，用于提示用户要在控件中输入什么；
size = "···"
- 设置组件大小；
clearable
- 是否显示清除按钮；
editable
- 是否允许手动输入日期；

其基本格式是：

html 复制代码

<el-date-picker  
    v-model = "···"
    type = "···"
    format = "···"
    value-format = "···"
    range-separator = "x"
    :picker-options = [{
        text: "快捷选项名"
        onClick(picker) {
            ····
            picker.$emit('pick',···)
        }
    }]
    clearable
    editable
    placeholder = "···"
    size = "···"
>
</el-date-picker>

el-button
- 用于在网页上创建按钮，提供一个与用户交互的方式；
- 这里映入一个概念【焦点】：指当前用户交互关注到的地方（一般是鼠标光标停留的地方）。当一个元素获得焦点时，该元素会自动呈现一些视觉上的反馈，以显示"你真的按住了它"，例如：变色、虚化、加粗等；
- 其常见的属性为：
  1. type
    - 设置不同的按钮类型；
    - 常见的值有：
      1. primary：主按钮，通常用于主要操作，一般默认使用这个；
      2. success：成功按钮，常用于表示成功；
      3. warning：警告按钮，通常用于表示一些需要警惕的操作；
      4. danger：危险按钮，用于提示危险；
      5. info：信息按钮，用于提供一般信息；
      6. text：单纯就是文本按钮；
  2. size
    - 设置按钮的大小；
    - 常见的值是：
      1. small：小尺寸；
      2. mini：迷你尺寸；
      3. medium：中等尺寸(默认情况)；
  3. icon
    - 设置按钮的图标，默认情况下，图标会显示在按钮文本的左侧；
    - 其值是一个字符串，表示图表的类名。这个类名可以在 Element UI的图标库中查找，官方文档中有完整的图标列表；
  4. plain
    - 表示是否为朴素按钮（没有背景色，只有边框的按钮）；
  5. round
    - 表示是否为圆角按钮；
  6. circle
    - 表示是否为圆形按钮；
  7. loading
    - 表示是否显示加载状态；
    - 如果显示，则在用户点击按钮后，按钮上显示一个加载图标，说明系统正在处理请求，避免用户重复点击，提高用户体验；
  8. disabled
    - 表示是否禁用该按钮；
  9. auto-complete
    - 用于el-input类型的按钮，会自动补全；
  10. autofocus
    - 在页面加载完后自动获取焦点，省去了鼠标或者是键盘选中该按钮的时间，对于用户需要快速操作的场景非常有用；
    - 由于自动选中，之后用户只需要按下Enter键后就可以开始交互了；
  11. @click
    - 用于监听点按事件，设置点击按钮时触发的事件,等同于v-on:click；
    - 调用格式是
      html 复制代码
      
      <element @click = "methodname()">内容</element>`;
    - 其定义在<script>的methods对象中，格式如下：
      javascript 复制代码
      
      <script> export default { data() { ···· }, methods: { methodname() { // 定义的内容 ···· } } } </script>
    - 以此类推，还有@focus（获得焦点）和@blur（失去焦点）两种监听事件；

el-table

这是一个功能很强大且灵活的表格组件；

其主要特性包括：

v-loading

用于控制加载状态的显示与隐藏，需要配合<script></script>中的data(){···}的属性值loading使用，当loading的值是true时，元素会呈现出加载状态的图标；当loading为false时，元素的加载图标隐藏 。常见的格式如下：

javascript 复制代码

<template>  
    <div id = "app">
        // 将加载动态与元素进行绑定，除了el-table以外，其他el-元素也都可以用；
        <el-table v-loading = "loading">
            ····
        </el-table>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                // 用于在载入数据时自动显示加载图标
                loading: true;
            }
        },
        // 异步请求数据
        mounted() {
            setTimeout(() => {
                ····
                // 用于在操作后隐藏加载图标
                this.loading = false
            })
        }
    }
</script>

除此以外，还可以自定义加载的样式，即在标签内使用以下属性说明：
1. element-loading-text：自定义加载文字；
2. element-loading-spinner：自定义加载图标；

如果想要全局配置加载样式，则可以在main.js中设置，并使用

javascript 复制代码

import ElementUI from 'element-ui';

Vue.use(ElementUI,{
    ····
    loading: {
        spinner: '···'
    }
});

格式设置；

:data

用于和数据源相绑定，通常绑定的是一个数组；
通常数据源数组出现在data() {return {···}}中；

基本用法是：

javascript 复制代码

<template>
    // 实现数据的动态双向绑定
    <el-table :data = "tableData">
        ····
    </el-table>
</template>

<script>
    export default {
        data() {
            return {
                // 用来存放数据的数组
                tableData: []
            }
        },
        methods: {
            // 用来获取数据并存放到数组中，紧接着展示在前端表格中
            getTableData() {
                ····
            }
        }
    }
</script>

其中数组可以采用数据节的方式存储，即以键值对为基础的记录集合，如：

javascript 复制代码

tableData：[
    // 记录1
    {
        // a1,a2充当固定的字段，以构成表格，在el-table-column中用prop引用
        a1: value11,
        a2: value12
    },
    // 记录2
    {
        a1: value21,
        a2: value22
    },
    ····
]

height
- 设置表格的高度，可以是固定值或者是百分比；
- 取的值可以用calc(···)来浮动计算需要的值；
border
- 表示表格是否有边框；
size
- 设置表格的大小；
- 主要有三种：
  1. medium：中等（默认情况）；
  2. small：小；
  3. mini：迷你，非常小；
show-header
- 是否显示表格的表头；
style或者class
- 用于设置表格的格式，前者是引入具体的<style>或者.css文件，后者是直接设定；

stripe

确认是否对表格设置斑马纹（每一行的颜色对比度差别大，像斑马一样）；
默认值是true；

在此基础上可以使用

html 复制代码

<el-table stripe :row-class-name = "设置斑马纹条纹的样式">
    ···
</el-table>

<script>
    export default {
        data: {

        },
        methods: {
            const onTableRowClassName = ({row,rowIndex}) => {
                ····
                return '样式名';
            }
        }
    }
</script>

<style>
    .el-table.cell {
        ····
    }
    .el-table_样式名.cell {
        ····
    }
</style>

进行样式的自定义；

row-key
- 设置主键，作为唯一标识，用于选中行，展开行；
loading
- 同上；
fit
- 表示是否自适应列宽（适应移动端设备不同的造型，例如手机和平板）；
selection
- 表示是否显示多选框，以方便选中记录；
expand-row-key
- 用于指定展开的行；
empty-text
- 用于在数据为空时在表格中显示的文字；

除此以外，表格装填数据还需要配合 <el-table-column ··· /> 标签：

它主要用了存储每一条字段的信息，其基本格式是：
html 复制代码
```
<el-table-column prop = "···" label = "···" ···· />
```

其主要属性有：

prop：对应列内容的字段名；
label：显示在前端界面时的字段名/标题名，类似于别名；
width：列宽度；
min-width：最小列宽度；
formatter：用于将内容按需求格式化的函数；
- sortable：表示字段可否排序；
- sort-method：展示自定义的排序方式；
- filters：表示是否可以数据过滤，默认值为True;
- filter-method：展示自定义的过滤数据的方式；
fixed：将列固定在最左边或者最右边，值可以是right/left；

render-header：自定义表头内容

html 复制代码

<!--引入表格表头样式函数，且这个是动态的，用上:-->
<el-table-column :render-header="renderHeaderFunction" />

javascript 复制代码

// 定义样式函数
methods： {
    // h 是Vue.js的渲染函数，用于生成虚拟DOM，也是调用的主体，column是设置列名
    renderHeaderFunction(h,{column}) {
        return h('span', {style : 【样式的主要内容，可以是颜色，如：color："xxx"】, 【关于column.label的自定义表头格式】})
    }
}

render-cell：自定义单元格内容

javascript 复制代码

// 主要内容基本一致，但由于是单元格，所以确认的时候要加上行名
renderCellFunction(h,{row,column}) {
    // row[column.property]访问当前行的该列的数据，property即prop，是数组记录的键值，这是一种动态访问方式
    return h('span', {style ：'xxx'}, 【关于row[column.property]的自定义单元格格式】)
    // 格式为row[column.property].xxx，后者为修饰函数
    //.topUpperCase()是全转换为大写形式；
    //.topLowerCase()是全转换为小写形式；
    //.trim()是移除字符串两端的空白字符；
    //.slice(start,end)是截取索引从[start,end)的子字符串内容，且支持负索引；
    //.substring(start,end)和上述的相同，但不支持负索引；  
    //.substr(start,len)与上述类似，但第二个参数是子字符串的长度；  
    //.split(separator)将字符串按照指定的分隔符拆分成数组
    //.includes(searchString)检查字符串中是否包含查找的子字符串，返回值是boolean值  
    //.startWith(searchString)检查字符串是否以指定的字符串开头，返回值是Boolean值
    //.endWith(searchString)与上边的类似，但是查找的是结尾是否一致
    //.concat(string1，string2，···)用于连接字符串
    //.repeat(x)将字符串重复x次输出
}

align ：用于设置整一列内容的对齐方式，可以选择right,center和left;
:show-overflow-tooltip ：用于当表格单元格内容超出宽度时，是否显示提示框 ，当属性为true时，鼠标悬停在单元格上会自动显示完整内容的提示框。当false时，则没有提示框；

还可以对单元格自定义列模板（插槽），使用<template xxx = "xxx"></template>:

默认插槽(用于单元格)

html 复制代码

<template slot-scope = "scope">
    <!--装填任何你想要的内容，例如你想要一个单元格有两个按钮一个下拉菜单-->
    <el-button></el-button>
    <el-button></el-button>
    <el-select></el-select>
</template>

列头插槽

html 复制代码

<template slot = "header">
    ····
</template>

条件渲染插槽

html 复制代码

<template slot = "scope">
    <el-xxx
        :type = "条件表达式 ? value1 : value2"
        ····>
    </el-xxx>
</template>

索引插槽

html 复制代码

<template slot = "predix" slot-scope = "scope">
    ····
</template>
<!--会作用于type="index"的列el-table-column-->

el-dialog
- 用于创建对话框或模态窗口，以显示重要信息、提示用户进行确认操作、或者承载复杂的表单输入等；
- 常配合【遮罩层】使用，即在点击按钮后弹出一个确认窗口，并且除窗口以外的其他页面部分变成毛玻璃效果（遮罩了以突出重点，类似于拍照时使用景深虚化突出中心主体，或者希区柯克变焦）；
- 其常见的属性有：
  1. title: 对话框标题;
  2. width: 设置对话框的宽度;
  3. center: 是否居中显示;
  4. top: 设置对话框距离顶部的距离，默认值是15vh;
  5. modal：是否设置遮罩层，默认值是true；
  6. append-to-body: 是否将对话框 append 到 body 上;
    - 如果对话框添加到 <body> 内，它就会处于页面最顶层，不受其他元素的样式影响，保证了对话框始终在最上层显示；如果对话框添加到其他容器内，可能会受到父元素样式的影响，导致对话框的位置、大小等出现问题。
    - 当对话框需要与其他元素有相对位置或对话框需要继承父元素的样式时，不需要添加到<body>中；
  7. visible：控制对话框是否可见，类型是Boolean值；
  8. fullscreen：展现是否是全屏对话框，默认值是false，类型是布尔型；
  9. show-close：管理是否显示对话框的关闭按钮，默认值时true；
  10. close-on-click-modal：配置是否可以通过点击遮罩层的方式关闭对话框，默认值是true，最好编程的时候能改成false；
  11. close-on-press-escape：配置是否可以通过按下Esc键关闭对话框，默认值是true，一般不做改变；
  12. before-close ：关闭对话框前的回调函数
    - 它充当一个事件监听器，目的是在弹窗或者对话框关闭以前执行一些预定义的操作 ，背后机理是接受一个done函数作为参数，调用done函数可以关闭对话框(done的默认值是true)。但调用时失败或者返回false会阻止对话框的关闭；
    - 常见的预定义操作例如：
      1. 关闭前弹出确认框让用户确定是否关闭；
      2. 关闭前进行数据保存；
      3. 关闭前将表单数据重置为初始状态；
      4. ......
    - 常见的使用方式是：
      html 复制代码
      
       <el-dialog title = "···" width = "30%" :before-close = "handleClose"> ···· </el-dialog>
      javascript 复制代码
      
      methods: { // 如上文所述，回调函数会调用done函数作为参数 handleClose(done) { // 这里的text1装填显示在对话框中的消息； // 这里的text2装填对话框的标题； // 这里的$是调用全局方法的意思，它被添加到Vue的实例上，可以通过this访问 this.$confirm(text1，text2，{ // 这里的text3装填确认按钮的文字 confirmButtonText：'text3' // 这里的text4装填取消按钮的文字 cancelButtonText: 'text4' }).then(() => { // 这里还可以执行一些关闭前的预定义函数 ···· // 这里的done是关闭对话框的方法，默认传值是true即关闭 done(); }) .catch(() => { // 传值为false，组织对话框的关闭 done(false); }) // this.$confirm会返回一个Promise对象，该对象被用于函数参数处理用户的反馈。如果用户点击确认按钮，则Promise会被resolve，即执行then()中的代码；当用户点击取消按钮，则Promise会被reject，即执行catch()中的代码 } }
  13. dialogVisible
    - 作为一个组件内的响应式属性，用于控制对话框的显示与隐藏状态；
    - 通常初始化状态是false，即对话框默认不显示;
    - 为了能使用对话框，要对其进行双向数据绑定，并通过组件行为触发事件更改dialogVisbile的值，经典格式如下：
      html 复制代码
      
       <el-dialog :visible.sync = "dialogVisible" title = "···"> <el-button @click = "dialogVisible = true">打开对话框</el-button> <el-button @click = "dialogVisible = false">关闭对话框</el-button> </el-dialog>
      javascript 复制代码
      
      data() { return { // 初始设定为不可见 dialogVisible: false }; }
  14. @open & @close
    - 和@click一样，在<template>中输入方法的名称，并在<script>中定义对应的方法;
    - 1. @open表示在对话框打开时触发；
      2. @close表示在对话框关闭时触发；
  15. destroy-on-close
    - 设置是否关闭时销毁对话框中的元素，类型是Boolean值，默认值是false；
el-input
- 是一个常用的表单输入组件，提供了多种类型的输入框；
- 基本用法是：
  html 复制代码
```
<el-input v-model = "···" placeholder = "···" type = "···" ····></el-input>
```
- 其常见属性是：
  1. type：表示输入框的类型，值包括：
    - text：文本输入框，用于输入任何字符；
    - password：密码输入框，输入内容用密码的形式加密(替代为·或者*) ;
    - textarea：多行文本输入框，用于输入大段文本；
    - number：数字输入框，只能输入数字，但可以设置最大数和最小数；
    - email：邮箱输入框，用于输入电子邮件地址，会进行最基本的格式校验；
    - url：url输入框，用于输入网址，也会进行基本的url格式校验；
    - search：搜索输入框，往往带有一个清除按钮；
    - tel：电话号码输入框，可以进行一些最基本的电话号码格式校验；
    - date：日期选择器，只能选择日期；
    - datetime：日期和时间选择器，可以选择日期和时间；
  2. v-model：动态双向绑定data()中的变量；
  3. placeholder：输入框为空时的提示文字；
  4. disabled：是否禁用该标签；
  5. clearable：是否允许清空，选择后会显示清除按钮，点击后可以清空输入框；
  6. size：控制输入框的大小，有medium、small、mini三种，如果不知道怎么选择的话可以使用autosize；
  7. maxlength：最大输入长度；
  8. show-word-limit：显示剩余可输入字符数；
  9. predix-icon/suffix-icon/icon：设置在输入框首尾的图标，图标和上边一样，从Element UI的图标库中查找；
  10. show-password：默认值是true，会在输入框的右侧显示一个眼睛的图标，点击眼睛后，可以切换密码的显示效果；
  11. readonly：将输入框设定为只读状态；
  12. autocomplete ：输入框自动装填，可能根据历史的输入记录或者其他信息，其可选择的属性值有：
    1. on：允许浏览器自动填充；
    2. off：禁止浏览器自动填充；
    3. new-password：禁止浏览器自动填充并建议用户输入一个新的密码；
    4. username：提示要输入一个用户名；
    5. email：提示要输入一个电子邮件；
    对于密码等安全性高的信息，应设置禁用自动填充，提高信息安全。而且在某些特殊情况，我们本着强调用户亲自手动输入的原则（如注册表输入），也应该禁用自动填充。
- 其常见的事件有：
  1. @focus：在输入框获得焦点时触发的事件；
  2. @blur：在输入框失去焦点时触发的事件；
  3. @change：在输入框内的值发生改变时触发的事件；
  4. @input：在输入值的时候触发的事件；
- 上述事件应该配合focus()获取焦点、blur失去焦点和select选中输入框中的全部文字三个方法使用，同样是在文档段引用和脚本段定义，具体格式如下：
  html 复制代码
```
<el-input type = "···" placeholder = "···" v-model = "xxx" clearble autocomplete = "off" @focus= "handleFocus" @xxxx = "handlexxxx"></el-input>
```
  javascript 复制代码
```
export default {
    data() {
        return {
            xxx: [],
            ····
        }，
        methods：{
            handleFocus() {
                // 使用this.$ref实现对于界面的全局引用
                this.$ref.input.focus();
                this.$ref.input.select();
            }
            handlexxxx() {
                // 进行自定义，也是使用this.$ref.input.xxxx来对input进行操作
                ····
            }
        }
    }
}
```
  Q：什么是 this.\$refs？
  
  A：在 Vue 中，this.\$refs 是一个对象，包含了我们在模板中使用 ref 属性注册过的所有 DOM 元素或子组件的引用 。通过 this.\$refs，我们可以直接操作这些元素或组件，实现一些动态的交互效果。这里说的引用是指如下的格式：
  javascript 复制代码
```
  <xxx ref = "xxxx"></xxx>
  
  this.$ref.xxxx.方法名(); 
  // 当没有歧义的时候，可以省略后边的.xxxx
```
  很明显，相较于ref，使用v-model是更为合适的选择，日常使用中尽量使用后者。
  
  【注意】：当输入框的功能差异较大时，可以将它们的 ref 放入一个对象中，以键值对的形式存储，形式为：
  ref = "迭代体组合"，例如可以把index之于v-for引入进来。
- 还可以使用复合的输入框，即在一个输入框中复合其他的信息或者功能。常见的方法是使用插槽：
  1. <template slot = "prefix"> & <template slot = "suffix">
    - 用于在输入框的内部的前后位置添加内容；
  2. <template slot = "prepend"> & <template slot = "append>
    - 用于在输入框的外部的前后位置添加内容；
  3. <template slot = "default">
    - 用于自定义输入框的整个内容；
  当 input 类型为 textarea 时，prefix、suffix、prepend 和 append 插槽不会被渲染。
<el-col> & <el-row>
- 是用于布局的部件，两者的组合可以在界面上形成栅格系统；
- 前者代表对列的操作，后者代表对行的操作；
- 栅格布局将页面划分为24个等份的栅格，并通过span属性来设置每个列所占的栅格数；
- 响应式布局则可以根据屏幕大小自动调整布局，实现自适应。
- 使用栅格系统可以按照以下格式：
  html 复制代码
```

<el-row :gutter = "x" ····>
    <el-col :span = "y" ····>
        
        ····
    </el-col>
</el-row>


```
- 除此以外，两者还有其他相关的属性：
  1. <el-row>
    - gutter：设置栅格之间的间隔，单位为像素;
    - justify：设置行内元素的水平对齐方式，如 start（左对齐）、center（居中）、end（右对齐）等；
    - align：设置行内元素的垂直对齐方式，如 top（顶部对齐）、middle（垂直居中）、bottom（底部对齐）等；
  2. <el-col>
    - span：定义列所占的栅格数，取值范围为 0 到 24，即一列最多有多少个元素；
    - offset：设置列的偏移量，改变列的起始位置 ，相当于在列的前面插入空白的栅格，可以实现留白和错位；
    - push：将列向右移动，但它不会在列的前面插入空白的栅格，而是将其他列向左挤；
    - pull：将当前列向左移动指定的栅格数； push和pull在你需要打破默认的列顺序时非常有用，但push 和 pull 的值不能超过总的栅格数 (24) 且值可以是负数，表示向相反方向移动。
<el-pagination>
- 用于实现分页功能的组件，或者说是给界面添加分页、页码跳转；
- 其常见属性是：
  1. total：总数据条数；
  2. page-size：每页显示的条数;
  3. v-show：后接表达式或者引用方法。指令会根据表达式的真假值来显示或隐藏元素；当表达式是true时，会显示组件，反之为false时会隐藏组件；
  4. current-page：自定义当前页码;
  5. page-sizes：自定义每页显示条数的选择项；
  6. :page.sync：同步当前页码，存储在脚本中；
  7. :limit.sync：同步每页显示的条数，存储在脚本中;
  8. @pagination：用于获得数据条，定义在脚本中；
  9. layout：自定义分页组件的布局，通常是连着写值，从左往右排，常见的值有：
    - prev：上一页按钮；
    - pager：页码列表;
    - next：下一页按钮；
    - jumper：跳转输入框;
    - sizes：每页显示条数选择器;
    - total：总条数;
    例如组合可以是total sizes prev pager next jumper,其格式如下：
  10. @oagination：用于关联获取分页数据的方法；
<span>
- 是一个通用的行内元素，通常用于对文档中的一小段文本进行标记，以便对其应用style样式或通过 JavaScript 进行操作。它本身没有固定的格式表现，其样式完全由 CSS 定义;
- 常见格式如：
  html 复制代码
```
<span class = "xxx"></span>
```
- 与<div>相比，<span> 是行内元素，不会独占一行，而<div>是块级元素，会独占一行。而且<span> 通常用于对一小段文本进行标记，而<div>通常用于对一组元素进行分组。

<el-card>

它是一个【卡片式容器组件】。它可以用来将一组相关的信息聚合在一个卡片中，以一种更加直观、美观的方式展示内容；
其基本形态包含：
1. 标题/header；
2. 内容/body;
3. 页脚/footer;
其常见的属性为：
- header：设置卡片的标题;
- body-style：设置内容区的样式;
- footer：设置卡片的页脚；
- shadow：设置卡片的阴影效果;
- loading：显示加载状态;
- hoverable：鼠标悬停时添加阴影效果;
- dismissible：是否可关闭;
- body-class：body的自定义类名；
- body-style：body的CSS样式；

当然也可以通过插槽的方式编辑标题和页脚，插槽的格式是：default，header，footer，以下是一个鲜明的例子：

html 复制代码

<template>
    <el-card class="box-card">
        <!--自定义了标题部分-->
        <template #header>
            <div class="card-header">
                <span>这是一张卡片</span>
                <el-button type="text">操作按钮</el-button>
            </div>
        </template>
        <!--自定义了内容部分-->
        <div v-slot:default>
            <p>这是一段文字，作为卡片的内容。</p>
            <el-image style="width: 180px; height: 180px" src="https://fuss10.elemecdn.com/e/5d/8ceffb4469a4bb1d904a511e6c13.jpg"/>
        </div>
        <!--自定义了页脚部分-->
        <template #footer>
            <div class="card-footer">
                <el-button type="text">查看详情</el-button>
                <el-button type="text">编辑</el-button>
            </div>
        </template>
    </el-card>
</template>

<el-switch>
- 一个开关组件，常用于表示两种互斥的状态，生成图标和ios的开关图标一样；
- 其主要属性有：
  - v-model：用于绑定数据，控制开关的状态，数据常为boolean值，预先定义在data()中;
  - active-color：设定激活状态下（如打开开关）的颜色；
  - inactive-color：非激活状态下的颜色;
  - disabled: 是否禁用；
  - loading: 设置是否呈现加载状态；
  - size: 设置尺寸，有small、medium、large三种；
  - change: 当开关状态发生改变时触发;