Vue学习日记35

àì夳堔傛蜴生んèń 2022-11-01 04:23 482阅读 0赞

**1.Table-column属性**  
解析：

[1]type：对应列的类型。如果设置了selection则显示多选框；如果设置了index则显示该行的索引[从1开始计算]；如果设置了expand则显示为一个可展开的按钮
    [2]index：如果设置了type=index，可以通过传递index属性来自定义索引
    [3]column-key：column的key，如果需要使用filter-change事件，则需要此属性标识是哪个column的筛选条件
    [4]label：显示的标题
    [5]prop：对应列内容的字段名，也可以使用property属性
    [6]width：对应列的宽度
    [7]min-width：对应列的最小宽度，与width的区别是width是固定的，min-width会把剩余宽度按比例分配给设置了min-width的列
    [8]fixed：列是否固定在左侧或者右侧，true表示固定在左侧
    [9]render-header：列标题Label区域渲染使用的Function
    [10]sortable：对应列是否可以排序，如果设置为'custom'，则代表用户希望远程排序，需要监听Table的sort-change事件
    [11]sort-method：对数据进行排序的时候使用的方法，仅当sortable设置为true的时候有效，需返回一个数字，和Array.sort表现一致
    [12]sort-by：指定数据按照哪个属性进行排序，仅当sortable设置为true且没有设置sort-method的时候有效。如果sort-by为数组，则先按照第1个属性排序，如果第1个相等，再按照第2个排序，以此类推
    [13]sort-orders：数据在排序时所使用排序策略的轮转顺序，仅当sortable为true时有效。需传入一个数组，随着用户点击表头，该列依次按照数组中元素的顺序进行排序
    [14]resizable：对应列是否可以通过拖动改变宽度[需要在el-table上设置border属性为真]
    [15]formatter：用来格式化内容
    [16]show-overflow-tooltip：当内容过长被隐藏时显示tooltip
    [17]align：对齐方式
    [18]header-align：表头对齐方式，若不设置该项，则使用表格的对齐方式
    [19]class-name：列的className
    [20]label-class-name：当前列标题的自定义类名
    [21]selectable：仅对type=selection的列有效，类型为Function，Function的返回值用来决定这一行的CheckBox是否可以勾选
    [22]reserve-selection：仅对type=selection的列有效，类型为Boolean，为true则会在数据更新之后保留之前选中的数据[需指定row-key]
    [23]filters：数据过滤的选项，数组格式，数组中的元素需要有text和value属性
    [24]filter-placement：过滤弹出框的定位
    [25]filter-multiple：数据过滤的选项是否多选
    [26]filter-method：数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回true就会显示
    [27]filtered-value：选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性

**2.Table-column Scoped Slot**  
解析：  
\[1\]—：自定义列的内容，参数为\{row, column, $index\}  
\[2\]header：自定义表头的内容，参数为\{column, $index\}

**3.@submit.native.prevent**  
解析：当一个form元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在<el-form>标签上添加@submit.native.prevent。

**4.Form表单**  
解析：由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据。

[1]典型表单：包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。在Form组件中，每一个表单域由一个Form-Item组件构成，表单域中可以放置各种类型的表单控件，包括Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker
    [2]行内表单：当垂直方向空间受限且表单较简单时，可以在一行内放置表单。设置inline属性可以让表单域变为行内的表单域
    [3]对齐方式：根据具体目标和制约因素，选择最佳的标签对齐方式。通过设置label-position属性可以改变表单域标签的位置，可选值为top、left，当设为top时标签会置于表单域的顶部
    [4]表单验证：在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。Form组件提供了表单验证的功能，只需要通过rules属性传入约定的验证规则，并将Form-Item的prop属性设置为需校验的字段名即可
    [5]自定义校验规则：使用自定义验证规则来完成密码的二次验证。使用status-icon属性为输入框添加了表示校验结果的反馈图标
    [6]动态增减表单项：除了在Form组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
    [7]数字类型验证：数字类型的验证需要在v-model处加上.number的修饰符，这是Vue自身提供的用于将绑定值转化为number类型的修饰符
    [8]表单内组件尺寸控制：通过设置Form上的size属性可以使该表单内所有可调节大小的组件继承该尺寸。Form-Item也具有该属性

**5.Form属性**  
解析：

[1]model：表单数据对象
    [2]rules：表单验证规则
    [3]inline：行内表单模式
    [4]label-position：表单域标签的位置，如果值为left或者right时，则需要设置label-width
    [5]label-width：表单域标签的宽度，例如'50px'。作为Form直接子元素的form-item会继承该值。支持auto。、
    [6]label-suffix：表单域标签的后缀
    [7]hide-required-asterisk：是否显示必填字段的标签旁边的红色星号
    [8]show-message：是否显示校验错误信息
    [9]inline-message：是否以行内形式展示校验信息
    [10]status-icon：是否在输入框中显示校验结果反馈图标
    [11]validate-on-rule-change：是否在rules属性改变后立即触发一次验证
    [12]size：用于控制该表单内组件的尺寸
    [13]disabled：是否禁用该表单内的所有组件。若设置为true，则表单内组件上的disabled属性不再生效

**6.Form方法**  
解析：

[1]validate：对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个promise
    [2]validateField：对部分表单字段进行校验的方法
    [3]resetFields：对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
    [4]clearValidate：移除表单项的校验结果。传入待移除的表单项的prop属性或者prop组成的数组，如不传则移除整个表单的校验结果

**7.Form事件**  
解析：  
\[1\]validate：任一表单项被校验后触发

**8.Form-Item属性**  
解析：

[1]prop：表单域model字段，在使用validate、resetFields方法的情况下，该属性是必填的
    [2]label：标签文本
    [3]label-width：表单域标签的的宽度，例如'50px'。支持auto。
    [4]required：是否必填，如不设置，则会根据校验规则自动生成
    [5]rules：表单验证规则
    [6]error：表单域验证错误信息,设置该值会使表单验证状态变为error，并显示该错误信息
    [7]show-message：是否显示校验错误信息
    [8]inline-message：以行内形式展示校验信息
    [9]size：用于控制该表单域下组件的尺寸

**9.Form-Item Slot**  
解析：  
\[1\]—：Form Item的内容  
\[2\]label：标签文本的内容

**10.Form-Item Scoped Slot**  
解析：  
\[1\]error：自定义表单校验信息的显示方式，参数为\{error\}

**11.Form-Item方法**  
解析：  
\[1\]resetField：对该表单项进行重置，将其值重置为初始值并移除校验结果  
\[2\]clearValidate：移除该表单项的校验结果

**12.@keyup.enter.native**  
解析：按回车键后自动触发事件。

**13.Input输入框**  
解析：

[1]基础用法
    [2]禁用状态：通过disabled属性指定是否禁用input组件
    [3]可清空：使用clearable属性即可得到一个可清空的输入框
    [4]密码框：使用show-password属性即可得到一个可切换显示隐藏的密码框
    [5]带icon的输入框：可以通过prefix-icon和suffix-icon属性在input组件首部和尾部增加显示图标，也可以通过slot来放置图标。
    [6]文本域：用于输入多行文本信息，通过将type属性的值指定为textarea。文本域高度可通过rows属性控制
    [7]可自适应文本高度的文本域：通过设置autosize属性可以使得文本域的高度能够根据文本内容自动进行调整，并且autosize还可以设定为一个对象，指定最小行数和最大行数
    [8]复合型输入框：可前置或后置元素，一般为标签或按钮。可通过slot来指定在input中前置或者后置内容
    [9]尺寸：可通过size属性指定输入框的尺寸，除了默认的大小外，还提供了large、small和mini三种尺寸
    [10]带输入建议：根据输入内容提供对应的输入建议。autocomplete是一个可带输入建议的输入框组件，fetch-suggestions是一个返回输入建议的方法属性
    [11]自定义模板：可自定义输入建议的显示。使用scopedslot自定义输入建议的模板。该scope的参数为item，表示当前输入建议对象
    [12]远程搜索：从服务端搜索数据
    [13]输入长度限制：maxlength和minlength是原生属性，用来限制输入框的字符长度

**14.Input属性**  
解析：

[1]type：类型
    [2]value/v-model：绑定值
    [3]maxlength：原生属性，最大输入长度
    [4]minlength：原生属性，最小输入长度
    [5]show-word-limit：是否显示输入字数统计，只在type="text"或type="textarea"时有效
    [6]placeholder：输入框占位文本
    [7]clearable：是否可清空
    [8]show-password：是否显示切换密码图标
    [9]disabled：禁用
    [10]size：输入框尺寸，只在type!="textarea"时有效
    [11]prefix-icon：输入框头部图标
    [12]suffix-icon：输入框尾部图标
    [13]rows：输入框行数，只对type="textarea"有效
    [14]autosize：自适应内容高度，只对type="textarea"有效，可传入对象，比如{
        minRows:2,maxRows:6}
    [15]autocomplete：原生属性，自动补全
    [16]auto-complete：下个主版本弃用
    [17]name：原生属性
    [18]readonly：原生属性，是否只读
    [19]max：原生属性，设置最大值
    [20]min：原生属性，设置最小值
    [21]step：原生属性，设置输入字段的合法数字间隔
    [22]resize：控制是否能被用户缩放
    [23]autofocus：原生属性，自动获取焦点
    [24]form：原生属性
    [25]label：输入框关联的label文字
    [26]tabindex：输入框的tabindex
    [27]validate-event：输入时是否触发表单的校验

**15.Input Slots**  
解析：  
\[1\]prefix：输入框头部内容，只对type="text"有效  
\[2\]suffix：输入框尾部内容，只对type="text"有效  
\[3\]prepend：输入框前置内容，只对type="text"有效  
\[4\]append：输入框后置内容，只对type="text"有效

**16.Input事件**  
解析：  
\[1\]blur：在Input失去焦点时触发  
\[2\]focus：在Input获得焦点时触发  
\[3\]change：仅在输入框失去焦点或用户按下回车时触发  
\[4\]input：在Input值改变时触发  
\[5\]clear：在点击由clearable属性生成的清空按钮时触发

**17.Input方法**  
解析：  
\[1\]focus：使input获取焦点  
\[2\]blur：使input失去焦点  
\[3\]select：选中input中的文字

**18.Autocomplete属性**  
解析：

[1]placeholder：输入框占位文本
    [2]disabled：禁用
    [3]value-key：输入建议对象中用于显示的键名
    [4]value：必填值，输入绑定值
    [5]debounce：获取输入建议的去抖延时
    [6]placement：菜单弹出位置
    [7]fetch-suggestions：返回输入建议的方法，仅当你的输入建议数据resolve时，通过调用callback(data:[])来返回它
    [8]popper-class：Autocomplete下拉列表的类名
    [9]trigger-on-focus：是否在输入框focus时显示建议列表
    [10]name：原生属性
    [11]select-when-unmatched：在输入没有任何匹配建议的情况下，按下回车是否触发select事件
    [12]label：输入框关联的label文字
    [13]prefix-icon：输入框头部图标
    [14]suffix-icon：输入框尾部图标
    [15]hide-loading：是否隐藏远程加载时的加载图标
    [16]popper-append-to-body：是否将下拉列表插入至body元素。在下拉列表的定位出现问题时，可将该属性设置为false
    [17]highlight-first-item：是否默认突出显示远程搜索建议中的第一项

**19.Autocomplete Slots**  
解析：  
\[1\]prefix：输入框头部内容  
\[2\]suffix：输入框尾部内容  
\[3\]prepend：输入框前置内容  
\[4\]append：输入框后置内容

**20.Autocomplete Scoped Slot**  
解析：  
\[1\]—：自定义输入建议，参数为\{item\}

**21.Autocomplete事件**  
解析：  
\[1\]select：点击选中建议项时触发  
\[2\]change：在Input值改变时触发

**22.Autocomplete方法**  
解析：  
\[1\]focus：使input获取焦点

**23.el-pagination属性**  
解析：

[1]small：是否使用小型分页样式
    [2]background：是否为分页按钮添加背景色
    [3]page-size：每页显示条目个数，支持.sync修饰符
    [4]total：总条目数
    [5]page-count：总页数，total和page-count设置任意一个就可以达到显示页码的功能；如果要支持page-sizes的更改，则需要使用total属性
    [6]pager-count：页码按钮的数量，当总页数超过该值时会折叠
    [7]current-page：当前页数，支持.sync修饰符
    [8]layout：组件布局，子组件名用逗号分隔
    [9]page-sizes：每页显示个数选择器的选项设置
    [10]popper-class：每页显示个数选择器的下拉框类名
    [11]prev-text：替代图标显示的上一页文字
    [12]next-text：替代图标显示的下一页文字
    [13]disabled：是否禁用
    [14]hide-on-single-page：只有一页时是否隐藏

**24.el-pagination事件**  
解析：  
\[1\]size-change：pageSize改变时会触发  
\[2\]current-change：currentPage改变时会触发  
\[3\]prev-click：用户点击上一页按钮改变当前页后触发  
\[4\]next-click：用户点击下一页按钮改变当前页后触发

**25.el-pagination Slot**  
解析：  
\[1\]—：自定义内容，需要在layout中列出slot

参考文献：  
\[1\]Input输入框：https://element.eleme.io/\#/zh-CN/component/input