vue学习总结02

最新推荐文章于 2024-05-16 10:56:48 发布

狮子QH

最新推荐文章于 2024-05-16 10:56:48 发布

阅读量1.7k

点赞数

本文链接：https://blog.csdn.net/weixin_42282999/article/details/104695603

版权

vue多选实现

{ {role.name}} 注： ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200306143421893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI4Mjk5OQ==,size_16,color_FFFFFF,t_70)

input HTML onsearch 事件属性的定义和用法

onsearch 事件在用户按下"ENTER（回车）" 按键或点击 type=“search” 的元素的 “x(搜索)” 按钮时触发。

input的几种触发事件

在这里插入图片描述

下拉菜单与下拉列表的区别

（1）下拉列表可以自己输入，下拉菜单不可以自己输入
（2）下拉列表能自己输入就可以进行搜索，而下拉菜单只能筛选
（3）下拉菜单的每一个DropdownMenu相当与一个card可以放入组件

Dropdown下拉菜单

在这里插入图片描述

通过$emit 实现通信

子组件向父组件传递参数
vm.$emit( event, arg )
$emit 绑定一个自定义事件event，当这个这个语句被执行到的时候，就会将参数arg传递给父组件，父组件通过@event监听并接收参数。
父组件向子组件传递参数
props

vue导出Excel格式

引入包vue-json-excel
在这里插入图片描述

import JsonExcel from 'vue-json-excel'
<Col span="1" v-if="isExportExcel">
  <json-excel :fields="exportField" :name="excelName" :data="exportData"><Button>导出</Button></json-excel>
</Col>

modal模块

在这里插入图片描述

https://www.iviewui.com/components/modal

button按钮

在这里插入图片描述

弹框延迟秒数

this.$Message.error({
   
    content:'预算检测中，请稍后再试',
    duration:5
})

https://www.cnblogs.com/matd/p/11535876.html

vue异步函数有序化

例子：

GetFlavorInfo(){
   
    return new Promise(((resolve,reject)=>{
        GetFlavorInfos().then(res=>{
            if(res.errno === 0){
                resolve(res.data)
            }else{
                reject(res.errmsg)
            }
        }).catch(err=>{
            reject(err)
        })
    }))
},

使用：

async created() {
   
    this.flavorList = await this.GetFlavorInfo()
    this.$nextTick(this.JudgeBudget);
    this.$nextTick(this.JudgeCloudBudget);
}

方式：

（1）promise使用
（2）generator函数
（3）async函数

sync函数的特点：

语义化强
里面的await只能在async函数中使用
await后面的语句可以是promise对象、数字、字符串等
async函数返回的是一个Promsie对象
await语句后的Promise对象变成reject状态时，那么整个async函数会中断，后面的程序不会继续执行
https://www.jianshu.com/p/631f9406c4e0

注释：Promise中resolve与reject函数将返回值返回，若为空默认不返回

例如：

GetReditorData(productName){
   
    return new Promise((resolve, reject) => {
   
        GetInstancesByProduct(data).then(res2 => {
   
            resolve()
        }).catch(err=>{
   
            reject(err)
        })
    })
},

首先在 function 前面加 async 用来说明这个函数是一个异步函数，当然，async是要和await配合使用的，第一个请求

let code = await getCode();

await 意思是等一下，等着getCode（）这个函数执行完毕，得到值后再赋值给code，然后再用code的值进行下一步操作。

https://blog.csdn.net/zhaoxiang66/article/details/81017373

Circle 进度环

Circle props
在这里插入图片描述
注：进度环中通过percent的值控制进度环的进度量

computed:{
   
    //计算百分比
 percent:function(){
   
        let allNum = Number(this.exportNum)
        let actNum = Number(this.exportData.length)
        let percent = parseInt(actNum/allNum) * 100
 return percent
 },
    //颜色变化
 color:function(){
   
        let color = '#2db7f5';
        if (this.percent == 100) {
   
            color = '#5cb85c';
        }
        return color;
    },
},

注：Number() 函数把对象的值转换为数字。
在这里插入图片描述
https://www.iviewui.com/components/circle

table组件的详解

<Table border ref="selection" :data="tableData" :columns="columns1" :sortChange="tableSort" @load="loadData" @on-selection-change="selectChange">
</Table>

注：
border表格有边框

ref 有三种用法：
　　1、ref 加在普通的元素上，用this.ref.name 获取到的是dom元素
　　2、ref 加在子组件上，用this.ref.name 获取到的是组件实例，可以使用组件的所有方法。
　　3、如何利用 v-for 和 ref 获取一组数组或者dom 节点
https://www.cnblogs.com/goloving/p/9404099.html

@on-select，选中某一项触发，返回值为 selection 和 row，分别为已选项和刚选择的项。
@on-select-all，点击全选时触发，返回值为 selection，已选项。
@on-selection-change，只要选中项发生变化时就会触发，返回值为 selection，已选项。通过给 columns
数据的项，设置 sortable: true，即可对该列数据进行排序。

排序默认使用升序和降序，也可以通过设置属性 sortMethod 指定一个自定义排序函数，接收三个参数 a 、 b 和 type。

通过给某一列设置 sortType 可以在初始化时使用排序。

如果使用远程排序，可以设置 sortable: ‘custom’，然后在触发排序事件 @on-sort-change后，进行远程排序，并手动设置新的 data，详见 API。

注意，排序并不会影响到源数据 data。

通过给 columns 数据的项，设置 filters，可进行筛选，filters 接收一个数组，详见 Demo 和 API。

必须指定一个筛选函数 filterMethod 才可以进行筛选，filterMethod 传入两个参数 value 和 row，详见
Demo 和 API。

如果指定 filterMultiple: false，则使用单选，默认为多选。

注意，筛选并不会影响到源数据 data。

通过给 columns 数据的项，设置一个函数 render，可以自定义渲染当前列，包括渲染自定义组件，它基于 Vue 的 Render 函数。

render 函数传入两个参数，第一个是 h，第二个是对象，包含 row、column 和 index，分别指当前单元格数据，当前列数据，当前是第几行。

效果：
在这里插入图片描述

{
   
    title: '操作',
    key: 'action',
    width: 120,
    align: 'center',

    render: (h, params) => {
   
        if (!this.ItemHasPermission()('physical_admin')) {
   
            return h('span', {
   }, '')
        }
        return h('div', [
            h('Tooltip', {
   
                    props: {
   
                        content: '详情',
                    }
                },
                [h('Icon', {
   
                    props: {
   
                        ty

最低0.47元/天解锁文章

狮子QH

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue学习总结02

vue多选实现 {{role.name}}注：![在这里插入图片描述](https://img-blog.csdnimg.cn/20200306143421893.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp...
复制链接

扫一扫