vue 表格 、 查询 、 分页 完整功能可直接复制套用

show-overflow-tooltip 超出隐藏属性

<template>
  <div class="form-template">
    <!-- 查询 -->
    <el-card class="box-card">
      <div slot="header">
        <i class="el-icon-search"></i>
        <span> 查询条件</span>
      </div>
      <div>
        <el-form ref="form" :model="form" label-width="118px" :inline="true">
          <el-form-item label="普通输入框:">
            <el-input v-model="form.inputVal"></el-input>
          </el-form-item>
          <el-form-item label="日期输入框:">
            <el-date-picker
              v-model="form.dateVal"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="多选框:">
            <el-select v-model="form.region" placeholder="请选择">
              <el-option label="一" value="shanghai"></el-option>
              <el-option label="二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label=" ">
               <el-button type="primary" size="small" @click="queryBtn">查询</el-button>
                <el-button type="success" size="small" @click="resetBtn">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 表格 -->
    <el-card class="box-card">
      <div slot="header" class="box-card-title">
        <div>
            <i class="el-icon-s-operation"></i>
        <span> 数据列表</span>
        </div>
        <div>
            <el-button type="primary" size="small" @click="addBtn">新增</el-button>
        </div>
      </div>
      <div>
        <!-- 表格 -->
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :max-height="tableHeight"
          :header-cell-style="{ background: '#5EAFFA', color: '#fff' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" align="center" width="55"   fixed="left">
          </el-table-column>
          <el-table-column label="序号" type="index" width="50"   fixed="left">
          </el-table-column>
          <el-table-column label="角色名称" align="center" width="180">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="权限清单"
            width="180"
            align="center"
          >
          </el-table-column><el-table-column
            prop="name"
            label="权限清单"
            width="180"
            align="center"
          >
          </el-table-column><el-table-column
            prop="name"
            label="权限清单"
            width="180"
            align="center"
          >
          </el-table-column><el-table-column
            prop="name"
            label="权限清单"
            width="180"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="address" label="地址"  width="280" align="center">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="120"
            align="center"
          >
            <template slot-scope="scope">
              <el-button
                @click.native.prevent="seeRow(scope.row.id)"
                type="text"
                size="small"
              >
                查看
              </el-button>
              <el-button
                @click.native.prevent="editRow(scope.row.id)"
                type="text"
                size="small"
              >
                编辑
              </el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.row.id)"
                type="text"
                size="small"
                class="deleteRow"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页器 -->
        <div class="paginations">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[1, 5, 10, 20]"
            layout="total, sizes, prev, pager, next, jumper"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        region: "",
        inputVal: "",
        dateVal: "",
      },
      // 表格最大高度
      tableHeight: window.innerHeight - 454,
      tableData: [
        {
          id: 1,
          date: "管理员",
          name: "权限测试",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          id: 1,
          date: "管理员",
          name: "权限测试",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          id: 1,
          date: "管理员",
          name: "权限测试",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          id: 1,
          date: "管理员",
          name: "权限测试",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          id: 1,
          date: "管理员",
          name: "权限测试",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          id: 1,
          date: "管理员",
          name: "权限测试",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          id: 1,
          date: "管理员",
          name: "权限测试",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          id: 1,
          date: "管理员",
          name: "权限测试",
          address: "上海市普陀区金沙江路 1518 弄",
        }, {
          id: 1,
          date: "管理员",
          name: "权限测试",
          address: "上海市普陀区金沙江路 1518 弄",
        },
       
      ],
      // 条数
      pageSize: 100,
      //   页数
      currentPage: 1,
      // 总条数
      total: 100,
      multipleSelection: [],
    };
  },

  methods: {
    // 选择每一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 表格数据查看
    seeRow(id) {},
    // 表格数据编辑
    editRow(id) {},
    // 表格数据删除
    deleteRow(id) {
      console.log(id);
    },
    // 条数改变触发的函数
    handleSizeChange(val) {
      // 重新给条数赋值
      //   this.pageSize = val;
    },
    // 页数改变触发的函数
    handleCurrentChange(val) {
      // 重新赋值
      //   this.currentPage = val;
    },
    // 查询按钮
    queryBtn(){
        console.log(this.form);
    },
    // 重置按钮
    resetBtn(){
        this.form={}
    },
    // 新增按钮
    addBtn(){

    }
  },
};
</script>

<style lang="less" scoped>
.form-template {
  .box-card {
    margin-bottom: 20px;
    //   border: 0;
    //   border-radius: 0;
    //   box-shadow: 0 0 0 #fff;
    .deleteRow {
      color: #f00;
    }
    .paginations {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
    }
    .box-card-title{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
  }
}
</style>