对elementUI的表格和分页的一些总结

对elementUI的表格和分页的一些总结

1.对el-table-column，只能使用min-width,width无效；
2.去除底部的边框：

el-table__row > td {
     
  border: none;
}

.el-table::before {
     
  height: 0px;
}

3. data中定义的数据：

 tableData: [], //table数据
  total: 0, //总数据量
  pagesize: 10, //每页10条
  currentPage: 1, //第一页

el-table标签的定义数据：

   :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"

4.全部代码：

    <el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
                    style="width: 100%">

            <el-table-column prop="ValueIndex"
                             label="序号"
                             align='center'
                             min-width="10%">
            el-table-column>
           
            <el-table-column prop="Name"
                             label="姓名"
                             align='center'
                             min-width="12.5%">
            el-table-column>
            <el-table-column prop="dep"
                             label="部门"
                             align='center'
                             min-width="15%">
            el-table-column>
            <el-table-column prop="work"
                             label="岗位"
                             align='center'
                             min-width="15%">
            el-table-column>
            <el-table-column prop="phone"
                             label="联系方式"
                             align='center'
                             min-width="15%">
            el-table-column>
            <el-table-column prop="email"
                             label="邮箱"
                             align='center'
                             min-width="20%">
            el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button size="mini"
                           @click="handleEdit(scope.$index, scope.row)">修改
                el-button>
                <el-button size="mini"
                           type="danger"
                           @click="handleDelete(scope.$index, scope.row)">删除
                el-button>
              template>
            el-table-column>
          el-table>
           <el-pagination background
                         layout="prev, pager, next"
                         :total="total"
                         @current-change="current_change">
          el-pagination>