Vue基础篇--table的封装

1、 在components文件夹中新建一个ITable的vue文件

    
        
            
                
                
                
                    
                        
                            
                                {{ props.row[item.prop] }}
                            
                        
                    
                
                
                
                
                
                
                
                
                
                
                
                
                    
                        
                            
                        
                    
                    
                    
                
                
                    
                        {{ item.label }}
                    
                
            
        
    


    export default {
        name: 'recordlist',
        props: {
            table: {
                type: Object,
                default() {
                    return {
                        hasMergeRowOrColumn: false, // 是否合并单元格
                        loading: false,          // 加载中动画
                        hasShowSummary: false,   // 是否显示表位合计行
                        border: false,           // 是否带有纵向边框，默认为false
                        height: "",        // 设置table的高度
                        align: 'center',   // 设置数据居中显示
                        hasSelect: false,        // 有无选中功能
                        hasOperation: false,     // 有无操作功能
                        hasExpand: false,        // 有无展开行功能
                        tr: [                    // 表头数据 —— className:列的class名
                            {
                                id: '1',
                                label: 'label',
                                prop: 'prop',
                                className: 'classname',
                                minWidth: '80',
                                show: true           // show有三种值：false隐藏当前列，true常规表格列，template自定义表格列
//          
//                {{ props.obj.row.username }}
//          
                            }
                        ],
                        data: [],                // 表格数据 —— 如需添加行class，处理数据时则需要传入class名， class需为数组
                        operation: {             // 操作功能
                            label: '操作',                // 操作列的行首文字
                            width: '200',                // 操作列的宽度
                            className: '',               // 操作列的class名
                            data: [                      // 操作列数据
                                {
                                    label: '通过',                // 按钮文字
                                    Fun: 'handleSubmit',         // 点击按钮后触发的父组件事件
                                    size: 'mini',                // 按钮大小
                                    id: '1',                     // 按钮循环组件的key值
                                    classname: 'show',         // 按钮的类名
                                    type: 'primary'             // 按钮的类型
                                }
                            ]
                        },
                        expands: [               // 展开行数据
                            {
                                id: '1',
                                label: 'label',
                                prop: 'prop'
                            }
                        ],
                        getSummaries(param) {               // 自定义表位合计行数据
                            // *** 此函数传入param参数
                            console.log(param);
                            // *** 最后返回一个数组，合计行会显示数组中的内容
                            return []
                        }
                    }
                }
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.$emit('onHandleSelectionChange', val);
            },
            handleOperation(a, b, id) {
                const data = this.table.operation.data;
                for (let i = 0; i  
2、在单页面中引入ITable组件并使用，代码如下：
 
  

      
        
        
          {{ props.obj.row.username }}
        
      


import iTable from '@/components/ITable'
export default {
  name: 'Dept',
    components: {iTable},
data() {
    return {
      dataTable: {
        tr: [
          {
            id: '1',
            label: '用户名',
            prop: 'username',
            show: 'template',
            className: 'username'
          },
          {
            id: '2',
            label: '真实姓名',
            prop: 'real_name'
          },
          {
            id: '3',
            label: '性别',
            prop: 'sex_value'
          },
          {
            id: '11',
            label: '客服',
            prop: 'agent_name'
          },
          {
            id: '7',
            label: '渠道',
            prop: 'channel_id'
          },
          {
            id: '8',
            label: '注册时间',
            prop: 'regist_time',
            minWidth: '150'
          },
          {
            id: '9',
            label: '上次登录时间',
            prop: 'login_time',
            minWidth: '150'
          },
          {
            id: '10',
            label: '用户状态',
            prop: 'status_value'
          }
        ],
        operation:{
          label: '操作',                // 操作列的行首文字
          width: '200',
          data: [                      // 操作列数据
            {
              label: '添加',                // 按钮文字
              Fun: 'commitDate',         // 点击按钮后触发的父组件事件
              size: 'mini',                // 按钮大小
              id: '1',                     // 按钮循环组件的key值
              classname: 'show',            // 按钮的类名
              type: 'primary'
            },{
              label: '删除',                // 按钮文字
              Fun: 'deleteDate',         // 点击按钮后触发的父组件事件
              size: 'mini',                // 按钮大小
              id: '1',                     // 按钮循环组件的key值
              classname: 'show',            // 按钮的类名
              type: 'danger'
            }
          ]
        },
        data: [
                {
          username: '呆萌图',
          real_name: '张三',
          sex_value: '男',
          agent_name: '黎明',
          channel_id: '网购22222222222222222222222211111111111111111',
          regist_time: '2020-1-2',
          login_time: '2020-1-22',
          status_value: 'ok'
        },
          {
            username: '呆萌图',
            real_name: '张三',
            sex_value: '男',
            agent_name: '黎明',
            channel_id: '网购',
            regist_time: '2020-1-2',
            login_time: '2020-1-22',
            status_value: 'ok'
          },
          {
            username: '呆萌图',
            real_name: '张三',
            sex_value: '男',
            agent_name: '黎明',
            channel_id: '网购',
            regist_time: '2020-1-2',
            login_time: '2020-1-22',
            status_value: 'ok'
          },
          {
            username: '呆萌图',
            real_name: '张三',
            sex_value: '男',
            agent_name: '黎明',
            channel_id: '网购',
            regist_time: '2020-1-2',
            login_time: '2020-1-22',
            status_value: 'ok'
          }],
        border: true,
        height:"calc(100vh - 300px)",
        loading: false,
        align: "center",
        hasOperation: true,
      }
    }
  }
}