vue-table组件

父组件部分

父组件-使用

 

父组件-声明

components: {
    Tables
  }

父组件-传值

// 给子组件传值
      tableList: {
        // 表头
        tableHeader: [
          {
            prop: 'date',
            label: '日期',
            align: "center",
            width: "180"
          }, {
            prop: 'name',
            label: '姓名',
            align: "center",
            width: "180"
          }, {
            prop: 'address',
            label: '地址',
            align: "center",
          },
        ],
        // 表数据
        tableData: [
          {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          },
        ],
        // 操作列展示
        operation: {
          width: '220', // 操作列宽度
          align: 'center', // 排版位置:left、center、right 
          isShow: true, // 是否展示操作列
          seeButton: true, // 是否展示查看按钮
          editButton: true, // 是否展示操编辑按钮
          deleteButton: true, // 是否展示操删除按钮
        },
        currentPage: 1,  // 默认分页
        total: 11,  // 总条数
        loading: false, // 加载等待
      },

子组件部分

子组件内容








你可能感兴趣的:(vue-table组件)