二次封装table组件

封装table组件

初步设置

1. 在component文件夹下新建table的vue组件

   • name：设置组建的名称

     name: "tableComponent",
     

   • data：存放需要放在组件内的数据

     data(){
         return {
           table_data:[],
           table_config: {
             thead: [],
             checkBox: true
           }
         }
     },
     

   • methods：组件内用到的方法

   beforeMount() {
       this.getParkingList();
   },
   methods: {
       /** table config*/
       initConfig(){
         // 看有没有相对应的key，有的话就替换
         for (let key in this.config) {
           if (Object.keys(this.table_config).includes(key)){
             this.table_config[key] = this.config[key];
           }
         }
         console.log("config",this.config)
       },
       /** 获取列表 */
       getParkingList() {
         const requestData = {
           pageSize: 10,
           pageNumber: 1
         }
         ParkingList(requestData).then(response => {
           const data = response.data;
           if (data) {
             this.table_data = data
           }
         })
       },
     },

• props：规定父组件传入的属性

  props: {
      config: {
        type: Object,
        default: () => {}
      }
    },
  

• watch：监听是否传入新的数据属性，如有有新的数据传入，更新信息

  watch: {
      // 需要监听的对象
      config: {
        handler(newValue) {
          this.initConfig()
          console.log("newValue",newValue)
        },
        immediate: true
      }
    }
  

数据渲染

1. 在传入数据的时候传入url，在组件中通过父组件传来的url信息发送请求。也就是说把发送请求的步骤也给封装在子组件中了，父组件只需要传url到子组件中即可渲染数据。

2. 但是在后端传数据的时候，有时候用“1”，“0”来表示两个状态，需要转换成文字信息，这时候需要用到callback属性

3. callback属性在哪里定义？子组件的table_config的thead的每一个对象中，但是这个属性可有可无

   data() {
       return {
         table_config: {
           thead: [
             { label: "类型", prop:"type",
               type:"function",
               callback:()=>{
   				
               }},
           ],
           checkBox:false
         }
       }
     }
   

4. 在父组件定义每一个列的时候传入type的值，然后在子组件中接收v-if判断，如果type=='function'，那么做进一步的处理

   tableComponent.vue:

   <el-table-column v-if="item.type === 'function'" :key="item.prop" :prop="item.prop" :label="item.label">
    	// 做显示之类的处理   
       <span>{{ item.callback && item.callback() }}</span>
   </el-table-column>
   

5. callback方法一般是在父组件定义带上如何处理数据的方法进入子组件

   { 
       label: "类型", 
       prop:"type",
       type:"function",
      	callback:(row)=>{
       	 if (row.type == 0){
               return "室内"
            }else{
               return "室外"
             }
       }
   },
   

6. 在子组件中使用方法：

   • 在子组件中使用<span>标签传入callback方法{{ item.callback && item.callback() }}，需要先判断该方法是否存在

   • 把数据往外丢，放入callback函数的参数之中

     <template slot-scope="scope">
     	<span>{{ item.callback && item.callback(scope.row) }}</span>    
     </template>
     

   • 再设定父组件中的callback，return的值就是要显示的值（可以返回html代码）

     // 父组件
     { 
         label: "类型", 
         prop:"type",
         type:"function",
        	callback:(row)=>{
         	 if (row.type == 0){
                 return `1号<br/>室内`
              }else{
                 return `2号<br/>室外`
               }
         }
     },
     

     // tableComponent.vue
     <template slot-scope="scope">
     	<span v-html="item.callback && item.callback(scope.row)"></span>
     </template>
     

父组件定义方法传到子组件

1. 在父组件的config配置：handler:this.fun()，这样会出现的问题是this的指向问题，可以用箭头函数来解决handler:()=>this.fun()
2. 子组件的调用直接是@click="item.handler()"