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

最新推荐文章于 2024-07-03 11:19:28 发布

Wu.vue.js

最新推荐文章于 2024-07-03 11:19:28 发布

阅读量505

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/wufuShuna/article/details/107775772

版权

前端专栏收录该内容

12 篇文章 2 订阅

订阅专栏

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

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

el-table__row > td {
  border: none;
}

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

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>