vue+elementUI项目知识点整理

常见知识点说明

 

 v-if和v-show的区别是什么呢？
 
1.v-if:是条件渲染，每次都会重新删除或者创建元素，v-if有较高的切换性能消耗。
 
2.v-show:每次不会重新进行DOM删除和创建操作，只是切换元素的display:none样式，有较高的初始渲染消耗。
 
提示：如果元素涉及到频繁的切换，最好不要使用v-if而用v-show,如果可能永远被用户看到则用v-if

 ------------------------------------------------------------------------------------------------------------------------------------------------------------------

 跳转到某个页面

不带参数的跳转：

 

带参数的跳转： 

 -------------------------------------------------------------------------------------------------------------------------------------------------------------

输入框自动获取光标

第一种： 

第二种： 

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

v-for 要配合   ：key  使用 不配合会报 警告

     
       
       

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

前台页面表格里分别要求显示一级，二级，三级   但是后台返回的是字符串1,2,3    可用v-if 

vue里可以这么写： 

              prop="level"
        width="180"
        label="层级">
       
       

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Object.assign是什么意思啊？

 let para=Object.assign({},this.editform);

使用到的地方有

1，编辑table的某一行的时候。获取哪一行的数据给编辑的表格。

handleEdit: function (index, row) {
                this.editFormVisible = true;
                this.editForm = Object.assign({}, row);
            },

2，提交的时候。把data里面定义的一个对象赋值给一个变量，然后把这个变量传给后台。

                   let para = Object.assign({}, this.editForm);
                    editAffairtype(para).then((res) => {})

3.合并两个变量为一个。
                let para={name:'1'};
                let para2={name2:'1'};
                let a=Object.assign(para,para2);   //a就是{name:'1';name2:'1'}
 

----------------------------------------------------------------------------------------------------------------------------------------------------------------------

that.$refs['addForm'].resetFields(); 是什么意思啊？

报错解决

https://blog.csdn.net/u013675978/article/details/83536242

https://www.jianshu.com/p/6c77cd96a5f3

https://blog.csdn.net/abcde158308/article/details/80483073

 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 通过 scope.row 获取每一行的数据，但是怎么获取每一行的索引呢？

   
         
           
         
         
         
         
         
       
 

------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 

 router.push 和 router.replace 的区别

  methods: {
    toAddProduct () {
      // 跳转到某个指定的页面
      this.$router.push({name: 'add'})
    },

  editHandler (row) {

  // 带着参数 跳转到某个指定的页面
      this.$router.push({name: 'edit', params: {id: row.goods_id}})
    },

----------------------------------------------------------------------------------------------------------------------------------------------------------------------- 

gulp 和 webpack 的区别

------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 

element-UI之表格 

        ref="multipleTable"
    :data="tableData3"
    tooltip-effect="dark"          设置溢出隐藏后，鼠标放入提示全部信息，这个指的是 那个提示框的背景颜色

    border                                   整个表格带边框
    style="width: 60%" 
    @selection-change="handleSelectionChange">
          type="selection"           设置 多选框
      width="100">                 设置每一列表格的宽度
   
          label="日期"
      width="150">
     
   
          prop="address"
      label="地址"
      show-overflow-tooltip>               每一列设置溢出隐藏，鼠标放入提示全部信息
   
          prop="edit"
      label="编辑"
      show-overflow-tooltip>
     
   
   

------------------------------------------------------------------------------------------------------------------------------------------------------------------------ 

@refresh="initList" 

  showEditForm (cid) {
      // 编辑分类第一步
      // 获取分类下拉列表数据
      getCategories().then(res => {
        if (res.meta.status === 200) {
          this.ecateList = res.data
          // 获取数据后调用获取分类信息接口
          return getCateById({id: cid})
        }
      }).then(res => {
        if (res.meta.status === 200) {
          // 把数据填充到表单
          this.ecate.cat_pid = res.data.cat_id
          this.ecate.cat_name = res.data.cat_name
          this.ecate.cat_level = res.data.cat_level
          this.dialogVisible4Edit = true
        }
      })
    },
    refresh () {
      console.log('fresh')
    },
    handleSizeChange (val) {
      // 改变每页显示条数
      this.pagesize = val
      this.initList()
    },
    handleCurrentChange (val) {
      // 改变当前页码
      this.currentPage = val
      this.initList()
    },
    initList () {
      // 获取分类列表数据
      getCategories({type: 3, pagenum: this.currentPage, pagesize: this.pagesize}).then(res => {
        if (res.meta.status === 200) {
          this.dataSource = res.data.result
          this.pagesize = res.data.pagesize
          this.total = res.data.total
        }
      })
    }
  }, 

 跳转到某个页面

      

       
          {{nickname}}               class="iconfont icon-down">
         
           
             

@click="jumpTo('/user/profile')">个人信息

           
           
             

@click="jumpTo('/user/changepwd')">修改密码

           
            @click.native="logout">退出登录
         
       
     

在methods里 

      jumpTo(url){
        this.defaultActiveIndex = url;
        this.$router.push(url); //用go刷新
      },

----------------------------------------------------------------------------------------------------------------------------------------------------------------------- 

          prop="tag"
      label="标签"
      width="100"
      :filters="[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
     
     

在methods里面

      filterTag(value, row) {
        return row.tag === value;
      },