功能实现

搜索功能如何做？

首先给input框绑定v-module=‘search’ 点击搜索按钮获取搜索的接口
判断数组中是否包含搜索的内容，包含就进行渲染

网盘项目删除功能

1.给删除按钮绑定del事件 ，绑定弹框
2.点击确定的时候通过$emit(' 事件名',{})传递下标和对象
this.$emit('on-event',{
                        type:'delete',
                        item:this.item,
                        index:this.index
                      })
3.给父组件绑定监听
<Tablelist  @on-event='onEvent'></Tablelist>
在父组件中定义onEvent方法
 onEvent(e){
      switch(e.type){
        case 'delete':
        this.list.splice(e.type.index,1)
      }       
    }

全选功能

1.给多选框绑定changeSelect事件
<Checkbox @on-change='changeSelect' >全选</Checkbox>
点击的时候使用map遍历
 changeSelect(e){
      this.list.map((item,index)=>{
        console.log(item)
         item.checked=e
      })
    }
单选框
 <Checkbox class="mb-0 mr-3" v-model='item.checked'></Checkbox>

反选

computed计算属性  单选框绑定onChange事件
 <Checkbox   @on-change='onChange' v-model='item.checked'></Checkbox>
点击的时候向父组件传递checked，item，index，和value
onChange(e){
      this.$emit('on-event',{
                        type:'checked',
                        item:this.item,
                        index:this.index,
                        value:e
                      })
    }
父组件
<Checkbox :value="checkAllStatus" @on-change='changeSelect' />
          case "checked":
        this.list[e.index].checked=e.value;
父组件定义一个计算属性checkList，使用filter过滤出checked为true的数量
 		checkList() {
		                 return this.list.filter(item => item.checked == true)
			},
			checkAllStatus() {
				return this.list.length == this.checkList.length
			},
		

显示隐藏

checkedCount() {
		return this.checkList.length
	}

//重命名

给子组件重命名按钮绑定rename事件 绑定文字框
rename(){
	this.$emit('on-event',{
		type:'rename;
		index:this.index
                  }
}
父组件
case 'rename' :
this.rename（e.index）   父组件点击的时候会执行rename方法
value:''  输入框里的内容
弹框
 rename(index=false){
      let item = index == false ? this.checkList[0] : this.list[index];
	let value = item.name 
	this.$Modal.confirm({
	render: (h) => {
		return h('Input', {
			props: {
				value: value,
				autofocus: true,
				placeholder: '请填写新的名称...'
			},
			on: {
			   input: (val) => {
		                         this.value = val;
			}
		}
	})
		},
	onOk: () => {
		item.name = this.value
					},
				})
    }

注册的业务逻辑:

	1. 点击注册按钮
	
	2. 获取文本框输入的数据
	
	3. 判断输入的密码和确认的密码是否一致
	
	4. 可选(使用md5对密码进行加密)
	
	5. 调用注册接口,将文本框输入的数据通过注册接口发送给后台
	
	6. 如果注册成功,判断后台返回的状态码是否为200,后台会返回成功的状态码和成功的数据信息
	
	
		6.1 通过message提示框弹出一个提示,内容为注册成功
		
		6.2 切换到登录界面
	
	7. 如果注册失败,后台会返回失败的状态和失败的数据信息
	
		7.1 根据对用状态码和对应的数据信息给用户进行不同的提示

登录业务逻辑:

	1. 点击登录按钮
	
	2. 通过iview的form表单的rules验证规则判断输入的用户名和密码是否符合输入的要求
	
	3. 获取输入的用户名和密码 
	 
	4. 调用登录接口,将获取到的用户名和密码发送给后台
	
	5. 根据后台返回的状态码和数据进行下一步逻辑处理
	
		5.1 如果状态码为200的话,则表示登录成功,通过message进行登录成功的信息提示, 跳转首页
		
		5.2 如果状态码不为200的话,通过catch捕获错误,将对应的错误信息通过message进行提示