一个简单的Vue页面

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
      <el-form-item label="姓名" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入......"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="日期" label-width="90px">
        <el-date-picker
          ref="contractDatePicker"
          v-model="queryParams.queryDate"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          unlink-panels
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select placeholder="请选择性别" v-model="queryParams.sex">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 80px">
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8" type="flex" justify="end">
      <el-col :span="1.5">
        <!--        <el-tooltip class="item" effect="dark" content="导出" placement="top">-->
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['权限字符:xx:export']"
        >导出
        </el-button>
        <!--        </el-tooltip>-->
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" border :max-height="tableMaxHeight" :data="dataList" :span-method="handleSpanMethod"
              @selection-change="handleSelectionChange" show-summary :summary-method="getSummaries">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="姓名" align="center" prop="name" key="name" v-if="columns[0].visible"
                       width="100" :show-overflow-tooltip='true' fixed/>
      <el-table-column label="性别" align="center" prop="sex" key="sex"
                       v-if="columns[1].visible"
                       width="100" :show-overflow-tooltip='true'/>
      <el-table-column label="日期" align="center" prop="entryDate" key="entryDate"
                       v-if="columns[2].visible"
                       width="100" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.entryDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="金额" align="right" prop="num" key="num"
                       width="100" :show-overflow-tooltip='true'>
        <template slot-scope="scope">
          <span>{{ formatNumber(scope.row.num) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="其他" align="center">
        <el-table-column label="其他1" align="center" prop="" key=""
                         width="100" :show-overflow-tooltip='true'/>
        <el-table-column label="其他2" align="center" prop="" key=""
                         width="100" :show-overflow-tooltip='true'/>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />


  </div>
</template>

<script>
import {xx} from "@/api/xx/xx.js";

export default {
  name: "页面名",
  data() {
    return {
      options: [{
        value: '',
        label: '请选择性别'
      },{
        value: '男',
        label: '男'
      },
        {
          value: '女',
          label: '女'
        }
        ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 数据
      dataList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        queryDate: '',
        startDate: null,
        endDate: null,
        name: '',
        sex: '',
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      // 列信息显示或隐藏，与表格对应
      columns: [
        {key: 0, label: `姓名`, visible: true},
        {key: 1, label: `性别`, visible: true},
        {key: 2, label: `日期`, visible: true},
        {key: 3, label: ``, visible: true},
        {key: 4, label: ``, visible: true},
        {key: 5, label: ``, visible: true},
        {key: 6, label: ``, visible: true},
        {key: 7, label: ``, visible: true},
        {key: 8, label: ``, visible: true},
      ],
    };
  },
  /** 预加载 */  
  created() {
    this.getList();
  },
  computed: {
    tableMaxHeight() {
      const screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
      return screenHeight - 230;
    }
  },
  /** 方法 */  
  methods: {
    /** 查询数据 */
    getList() {
      this.loading = true;
      this.queryParams.params = {};
      this.queryParams.startDate = this.queryParams.queryDate[0];
      this.queryParams.endDate = this.queryParams.queryDate[1];
      query(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 导出按钮操作 并获取当前时间做标识*/
    handleExport() {
      var date = new Date()
      var year = date.getFullYear().toString()
      var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString()
      var day = date.getDate() < 10 ? '0' + date.getDate().toString() : date.getDate().toString()
      var h = date.getHours() < 10 ? '0' + date.getHours().toString() : date.getHours().toString()
      var m = date.getMinutes() < 10 ? '0' + date.getMinutes().toString() : date.getMinutes().toString()
      var s = date.getSeconds() < 10 ? '0' + date.getSeconds().toString() : date.getSeconds().toString()
      var dateTime = year + '-' + month + '-' + day + "_" + h + m + s
      this.download('/export', {
        ...this.queryParams
      }, `导出数据名称${dateTime}.xlsx`)
    },
    watch: {
        // 监听日期清理后数据为null进行处理否则会报错
        'queryParams.queryDate'(newVal) {
          if (newVal == null) {
            this.queryParams.queryDate = ''
          }
        }
    }，
    // 设置表头居中，使 align 属性生效不冲突表头格式，el-table 中加入 :header-cell-style="headerCellStyle"
    headerCellStyle({ column, rowIndex, columnIndex, cellStyle }) {
      return { textAlign: 'center' };
    },
    // 获取年月 yyyy-MM 放入数组 yearMonth: [] 用于下拉框 el-select -> el-option
    getMonth() {
      let startYear = 2023;
      let startMonth = 12;

      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1; // JavaScript的月份是从0开始的，所以需要加1
      // 获取下月
      let nextYear = year;
      let nextMonth = month + 1;
      if (nextMonth > 12) {
        nextYear++;
        nextMonth = 1;
      }
      if (startYear < nextYear) {
        for (let i = nextYear; i >= startYear + 1; i--) {
          if (i == nextYear) {
            for (let j = nextMonth; j >= 1; j--) {
              // .padStart(2,'0') 字符串开头 补零
              this.yearMonth.push(i + '-' + j.toString().padStart(2, '0'));
            }
            continue
          }
          for (let j = 1; j <= 12; j++) {
            this.yearMonth.push(i + '-' + j.toString().padStart(2, '0'));
          }
        }
      }
      this.yearMonth.push(startYear + '-' + startMonth.toString().padStart(2, '0'));
    },
    /** 表格合计行，导出表格数据时不会随之导出该行 */
    getSummaries(param) {
      const {columns, data} = param;
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计';
          return;
        }
        const values = data.map(item => Number(item[column.property]));
        if (!values.every(value => isNaN(value))) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
              // 保留两位小数
              //return Math.round((prev + value) * 100) / 100;
            } else {
              return prev;
            }
          }, 0);
          sums[index] += '';
          //显示千分位
          //sums[index] = sums[index].toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        } else {
          sums[index] = '';
        }
      });
      return sums;
    },
    /* 合并行 */
    handleSpanMethod({
                       row, // 行
                       column, // 列
                       rowIndex, // 行索引
                       columnIndex, // 列索引
                     }) {
      if (columnIndex === 1 || columnIndex === 2) {
        /*
        表格数据：this.tableList
        判断合并行数：this.mergeColumn()
        */
        const _row = (this.mergeColumn(this.dataList).one)[rowIndex]
        const _col = _row > 0 ? 1 : 0
        return {
          rowspan: _row,
          colspan: _col
        }
      }
    },
    mergeColumn(data) {
      const spanOneArr = []
      let concatOne = 0
      data.forEach((item, index) => {
        if (index === 0) {
          spanOneArr.push(1)
        } else {
          //条件
          if (item.jobNum === data[index - 1].jobNum) { //第一列需合并相同内容的字段
            spanOneArr[concatOne] += 1
            spanOneArr.push(0)
          } else {
            spanOneArr.push(1)
            concatOne = index
          }
        }
      })
      return {
        one: spanOneArr
      }
    },


  }
};
</script>

Select 选择器属性：

选择器搜索        filterable

选择器清空        clearable

选择器多选        multiple

<right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar> 该段具体代码

 样式：

<template>
  <div class="top-right-btn" :style="style">
    <el-row>
<!--      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top" v-if="search">-->
        <el-button size="mini" icon="el-icon-search" @click="toggleSearch()" >{{this.showSearch ? '隐藏搜索' : '显示搜索'}}</el-button>
<!--      </el-tooltip>-->
<!--      <el-tooltip class="item" effect="dark" content="刷新" placement="top">-->
        <el-button size="mini" icon="el-icon-refresh" @click="refresh()" >刷新</el-button><!--circle-->
<!--      </el-tooltip>-->
<!--      <el-tooltip class="item" effect="dark" content="显隐列" placement="top" v-if="columns">-->
        <el-button size="mini" icon="el-icon-menu" @click="showColumn()" v-if="columns" >显隐列</el-button>
<!--      </el-tooltip>-->
    </el-row>
    <el-dialog :title="title" :visible.sync="open" append-to-body>
      <el-transfer
        :titles="['显示', '隐藏']"
        v-model="value"
        :data="columns"
        @change="dataChange"
      ></el-transfer>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "RightToolbar",
  data() {
    return {
      // 显隐数据
      value: [],
      // 弹出层标题
      title: "显示/隐藏",
      // 是否显示弹出层
      open: false,
    };
  },
  props: {
    showSearch: {
      type: Boolean,
      default: true,
    },
    columns: {
      type: Array,
    },
    search: {
      type: Boolean,
      default: true,
    },
    gutter: {
      type: Number,
      default: 10,
    },
  },
  computed: {
    style() {
      const ret = {};
      if (this.gutter) {
        ret.marginRight = `${this.gutter / 2}px`;
      }
      return ret;
    }
  },
  created() {
    // 显隐列初始默认隐藏列
    for (let item in this.columns) {
      if (this.columns[item].visible === false) {
        this.value.push(parseInt(item));
      }
    }
  },
  methods: {
    // 搜索
    toggleSearch() {
      this.$emit("update:showSearch", !this.showSearch);
    },
    // 刷新
    refresh() {
      this.$emit("queryTable");
    },
    // 右侧列表元素变化
    dataChange(data) {
      for (let item in this.columns) {
        const key = this.columns[item].key;
        this.columns[item].visible = !data.includes(key);
      }
    },
    // 打开显隐列dialog
    showColumn() {
      this.open = true;
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-transfer__button {
  border-radius: 50%;
  padding: 12px;
  display: block;
  margin-left: 0px;
}
::v-deep .el-transfer__button:first-child {
  margin-bottom: 10px;
}
</style>