关于watch监听和页码序号的真实渲染

目录

watch监听

页码序号的真实渲染

附加其他的一些常用： 

---

watch监听

watch:默认侦听栈的变化,基本数据类型都能侦听，复杂数据类型，引用地址改变了它默认可以侦听到

使用deep的话

堆与栈都能侦听,默认值是false,默认只侦听栈的变化

immediate:初次绑定时就立马执行回调，默认是false

关于使用如下：

export default {
  data() {
    return {
      obj: {
        a: 10
      }
    }
  },
  watch: {
    // watch:默认侦听栈的变化,基本数据类型都能侦听，复杂数据类型，引用地址改变了它默认可以侦听到
    /*
    deep:堆与栈都能侦听,默认值是false,默认只侦听栈的变化
    immediate:初次绑定时就立马执行回调，默认是false
    */
    // obj(newVal) {
    //   console.log(newVal)
    // }
    obj: {
      // deep: true,
      immediate: true,
      handler(newVal, oldVal) {
        console.log(newVal, oldVal)
      }
    }
  },
  methods: {
    btnClick() {
      // this.obj.a = Math.random() * 999
      this.obj = {
        a: Math.random() * 999
      }
    }
  }
}

页码序号的真实渲染

在渲染表格数据的时候如下：

 

 这个序号我们希望下面的页码改变，它的序号值也发生改变，就是我点击几页第几条的时候，让它跟着我发生变化，而不是序号还是1

以下是算法和使用方法

 这个是使用elemen组件   ，$index是索引号

<el-table-column label="序号" type="index">
              <template v-slot="{ $index }">
                <div>
                  {{ (page.page - 1) * page.pagesize + $index + 1 }}
                </div>
              </template>
            </el-table-column>

附加其他的一些常用： 

还有一些vscode的快捷键用法如下：

1. ctrl+d 选中相同的

2. alt+鼠标左键， 出现多个光标，

3. ctrl+x 裁切

4. ctrl+shift+左/右 选中光标前面或者后面一个词

5. alt+上、下 能移动代码上下

 具名插槽和作用域插槽如下：

    具名插槽
         定义
          组件内xxx:
            div
                 <slot name="abc" />
       使用
          直接写  
            <xxx>
                <template v-slot:abc>
                    内容
                 <template>
            </xxx>  
            
     作用域插槽
         默认插槽
            定义
               <div>
               <slot num='123' />
               </div>
             使用
               <div   slot-scope="{num}"> 不建议使用
                <xxx>
                <template v-slot='scope/{num}'>
                scope:{
                    num:123
                }
                </template>
                </xxx>
              如果整个组件只有一个插槽且是作用域的默认插槽              
               <xxx v-slot='scope/{num}'>
                div。。。
                </xxx>                
                
                
           具名插槽
              定义
               <div>
               <slot num='123' name="abc" />
               </div>
             使用
               <div  slot="abc"   slot-scope="{num}"> 不建议使用
                <xxx>
                <template v-slot:abc='scope/{num}' #abc='scope/{num}'>
                scope:{
                    num:123
                }
                </template>
                </xxx>

用递归的方式进行树形数据处理

如下：

let arr=[
    {id:1,pid:0},
    {id:2,pid:1}    
    ...
]

function changeArr(arr,str=0){
    return arr.filter(item=>{
        if(item.pid===str){
           item.children=changeArr(arr,item.id)
            return true
        }
    })
}
changeArr(arr,0)===>[{id:1,pid:0,children:[]}]
changeArr(arr,1)====>[{id:2,pid:1}]

有些时候我们得到的数据是这样的

 但是我们想转换成树形一层套一层这样的

 

 如下：

created() {

    this.getData()

  },

methods: { 

    async getData() {

      const res = await companyDepartment()   

      console.log(res, '获得的数据')

    },