vue-table组件

父组件部分

父组件-使用

 <Tables :tableList='tableList'
              @seeClick="seeClick"
              @editClick="editClick"
              @deleteClick="deleteClick"
              @handleCurrentChange="handleCurrentChange"
              @handleSizeChange="handleSizeChange"></Tables>

父组件-声明

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, // 加载等待
      },

子组件部分

子组件内容

<template>
  <div class="maxDivBor">

    <el-table class="tableClass"
              :data="tableList.tableData"
              v-loading=" tableList.loading"
              border
              stripe
              style="width: 100%">
      <el-table-column label='序号'
                       type="index"
                       align="center"
                       width="50">
      </el-table-column>
      <el-table-column v-for="(item,index) in tableList.tableHeader"
                       :key="index"
                       :prop="item.prop"
                       :label="item.label"
                       :align="item.align"
                       :width="item.width"
                       :show-overflow-tooltip="true">
      </el-table-column>

      <el-table-column fixed="right"
                       :align="tableList.operation.align"
                       label="操作"
                       :width="tableList.operation.width"
                       v-if="tableList.operation.isShow">
        <template slot-scope="scope">
          <el-button @click="seeClick(scope.row)"
                     v-if="tableList.operation.seeButton"
                     type="primary"
                     size="mini">查看</el-button>
          <el-button @click="editClick(scope.row)"
                     v-if="tableList.operation.editButton"
                     type="warning"
                     size="mini">编辑</el-button>
          <el-button @click="deleteClick(scope.row)"
                     v-if="tableList.operation.deleteButton"
                     type="danger"
                     size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="tableList.currentPage"
                     :page-sizes="[10, 20, 30, 50]"
                     :page-size="10"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="tableList.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: 'tables',
  props: {
    tableList: Object, //表数据 
  },
  data () {
    return {
    }
  },
  methods: {
    // 每页条数
    handleSizeChange (val) {
      this.$emit('handleSizeChange', val)
    },
    // 当前页数
    handleCurrentChange (val) {
      this.$emit('handleCurrentChange', val)
    },
    // 查看
    seeClick (row) {
      this.$emit('seeClick', row)
    },
    // 编辑
    editClick (row) {
      this.$emit('editClick', row)
    },
    // 删除
    deleteClick (row) {
      this.$emit('deleteClick', row)
    }
  },
  created () {
  },
  mounted () {
  },
}
</script>

<style scoped>
.maxDivBor {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px;
  padding: 10px;
}
.tableClass {
}

/* 表格行高度 */
/deep/ .el-table td {
  /* padding: 6px 0; */
}
.block {
  text-align: right;
  margin-top: 10px;
}
.topDiv {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 10px;
  padding: 10px;
  text-align: center;
  min-height: 100px;
}
.inputDiv {
  display: inline-block;
  width: 290px;
  margin-bottom: 10px;
  float: left;
}
.condition {
  display: inline-block;
  width: 100px;
  text-align: right;
}
.inputText {
  width: 180px;
}
.inputBut {
  margin-left: 10px;
}
</style>