文章來源地址http://www.zghlxwxcb.cn/news/detail-635220.html

一、標(biāo)題 + 查詢條件+按鈕（Header）

<!-- Header 標(biāo)題搜索欄 -->
<template>
  <div>
    <div class="header">
      <div class="h-left">
        <div class="title">
          <div class="desc-test">
            <i class="el-icon-s-grid"></i>
            <span>{{ title }}</span>
          </div>
        </div>
      </div>
      <div class="h-right">
        <el-input
          v-if="inputType === 'input'"
          :placeholder="inputPlaceholder"
          v-model="searchValue"
          size="small"
          class="search"
          clearable
        >
        </el-input>
        <el-select
          v-else-if="inputType === 'select'"
          :placeholder="selectPlaceholder"
          v-model="searchValue"
          size="small"
          class="search"
          clearable
        >
          <!-- 添加select選項(xiàng) -->
          <el-option
            v-for="(option, index) in options"
            :key="index"
            :label="option.label"
            :value="option.value"
          ></el-option>
        </el-select>
        <!-- 按鈕組 -->
        <slot name="button-list"> </slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '測試管理',
    },
    inputType: {
      type: String,
      default: 'select', // 默認(rèn)為下拉框類型
    },
    inputPlaceholder: {
      type: String,
      default: '請輸入內(nèi)容', // 默認(rèn)提示內(nèi)容
    },
    selectPlaceholder: {
      type: String,
      default: '請選擇內(nèi)容', // 默認(rèn)提示內(nèi)容
    },
    options: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      searchValue: '',
    }
  },
  methods: {
    // handleSearchClick() {
    //   this.$emit('search-clicked', this.searchValue)
    // },
  },
}
</script>
<style lang="less" scoped>
.header {
  display: flex;
  height: 35px;
  line-height: 35px;
  justify-content: space-between;
  width: 100%;
  .h-left {
    width: 25%;
    .title {
      line-height: 26px;
      .desc-test {
        margin-top: 5px;
        font-weight: bold;
        margin-bottom: 3px;
        font-size: 14px;
        color: #313131;
        white-space: nowrap;
        width: fit-content;
        border-bottom: 2px solid #646565;
        i {
          font-size: 16px;
          position: relative;
          top: 1px;
          margin-right: 2px;
        }
      }
    }
  }
  .h-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    /deep/ .el-input__inner {
      height: 35px;
      line-height: 35px;
    }
    .search {
      margin-right: 20px;
    }
  }
}
</style>

二、高級查詢 （SearchCondition）

<!--
    *名稱：彈窗的搜索條件組件
    *功能：methods
      1.點(diǎn)擊搜索的方法：@search
      2.搜索條件 props : formItemList
-->

<template>
  <div class="searchBox" v-show="isShowSearch">
    <div class="dialog-search">
      <!-- inline 行內(nèi)表單域 -->
      <el-form
        :inline="true"
        ref="ruleForm"
        :model="formInline"
        class="demo-form-inline"
      >
        <el-form-item
          v-for="(item, index) in formItemList"
          :key="index"
          :label="
            item.label.length > 7 ? item.label.slice(0, 7) + '...' : item.label
          "
          label-width="115px"
        >
          <div class="icon-input">
            <!-- effect= light / dark -->
            <div class="slotIcon" slot="label">
              <el-tooltip effect="dark" :content="item.label" placement="top">
                <i class="el-icon-question" />
              </el-tooltip>
            </div>
            <div class="inputBox">
              <!-- 普通 input 框 -->
              <el-input
                v-if="item.type == 'input'"
                v-model.trim="formInline[item.param]"
                :size="getSize(item.param, item.type) || 'small'"
                placeholder="請輸入"
              ></el-input>
              <div style="width: 256px;" v-if="item.type === 'interval'">
                <!-- 區(qū)間輸入框 - 起始值 -->
                <el-input
                  style="width:47%;"
                  v-model.trim="formInline[item.param].start"
                  :size="getSize(item.param, item.type) || 'small'"
                  placeholder="起始值"
                ></el-input>
                <span> - </span>
                <!-- 區(qū)間輸入框 - 結(jié)束值 -->
                <el-input
                  style="width:48%;"
                  v-model.trim="formInline[item.param].end"
                  :size="getSize(item.param, item.type) || 'small'"
                  placeholder="結(jié)束值"
                ></el-input>
              </div>
              <!-- 時間區(qū)間選擇器 -->
              <el-date-picker
                style="width: 257px;"
                v-if="item.type == 'daterange'"
                v-model="formInline[item.param]"
                type="daterange"
                range-separator="-"
                start-placeholder="開始日期"
                end-placeholder="結(jié)束日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :size="getSize(item.param, item.type) || 'small'"
              >
              </el-date-picker>
              <!-- 單個日期 -->
              <el-date-picker
                v-if="item.type == 'date'"
                v-model="formInline[item.param]"
                type="date"
                placeholder="選擇日期"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                :size="getSize(item.param, item.type) || 'small'"
              >
              </el-date-picker>
              <!-- 數(shù)字輸入框 -->
              <el-input
                v-if="item.type == 'inputNumber'"
                v-model="formInline[item.param]"
                type="number"
                placeholder="請輸入數(shù)字"
                :min="getLimit(item.param, item.type, 'min') || ''"
                :max="getLimit(item.param, item.type, 'max') || ''"
                :maxlength="getMaxLength(item.param, item.type) || ''"
                :size="getSize(item.param, item.type) || 'small'"
                @change="handleChange(item)"
                @blur="handleBlur(item)"
              >
              </el-input>
              <!-- 文本輸入框 -->
              <el-input
                v-if="item.type == 'inputText'"
                v-model="formInline[item.param]"
                type="text"
                placeholder="請輸入文本"
                :maxlength="getMaxLength(item.param, item.type) || ''"
                :size="getSize(item.param, item.type) || 'small'"
                show-word-limit
              >
              </el-input>
              <!-- select 框 單選-->
              <el-select
                v-if="item.type == 'select'"
                v-model="formInline[item.param]"
                placeholder="請選擇內(nèi)容"
                :size="getSize(item.param, item.type) || 'small'"
              >
                <el-option
                  v-for="(item2, index2) in item.selectOptions"
                  :key="index2"
                  :label="item2.key"
                  :value="item2.value"
                ></el-option>
              </el-select>
              <!-- 省 的 select -->
              <el-select
                v-if="item.type == 'proSelect'"
                v-model="formInline[item.param]"
                placeholder="請選擇內(nèi)容"
                @change="provChange"
                :size="getSize(item.param, item.type) || 'small'"
              >
                <el-option
                  v-for="(item2, index2) in item.selectOptions"
                  :key="index2"
                  :label="item2.key"
                  :value="item2.id"
                ></el-option>
              </el-select>
              <!-- 市 的 select -->
              <el-select
                v-if="item.type == 'citySelect'"
                v-model="formInline[item.param]"
                placeholder="請選擇內(nèi)容"
                @change="cityChange"
                :size="getSize(item.param, item.type) || 'small'"
              >
                <el-option
                  v-for="(item2, index2) in cityList"
                  :key="index2"
                  :label="item2.key"
                  :value="item2.id"
                ></el-option>
              </el-select>
              <!-- 區(qū)縣 的 select -->
              <el-select
                v-if="item.type == 'xzqSelect'"
                v-model="formInline[item.param]"
                placeholder="請選擇內(nèi)容"
                @change="xzqChange"
                :size="getSize(item.param, item.type) || 'small'"
              >
                <el-option
                  v-for="(item2, index2) in quList"
                  :key="index2"
                  :label="item2.value"
                  :value="item2.id"
                ></el-option>
              </el-select>
            </div>
          </div>
        </el-form-item>
        <!-- 可用于顯示其他按鈕 -->
        <slot></slot>
      </el-form>
      <div class="btn">
        <el-form-item>
          <el-button type="primary" plain size="mini" @click="onSubmit"
            >查詢</el-button
          >
          <el-button
            type="success"
            plain
            size="mini"
            @click="resetForm('ruleForm')"
            >重置</el-button
          >
          <el-button type="warning" plain size="mini" @click="onClose"
            >關(guān)閉</el-button
          >
        </el-form-item>
      </div>
    </div>
  </div>
</template>

<script>
import { regionData, CodeToText } from 'element-china-area-data'
export default {
  name: 'BaseSearch',
  props: {
    formItemList: {
      type: Array,
      default() {
        return [
          {
            label: '下拉框',
            type: 'select',
            selectOptions: [{ name: 111, value: 111 }],
            param: 'company',
            defaultSelect: '222', // 下拉框默認(rèn)選中項(xiàng)
          },
          {
            label: '輸入框',
            type: 'input',
            param: 'name',
          },
        ]
      },
    },
    // 是否顯示 彈窗的搜索條件組件
    isShowSearch: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    // 獲取父組件傳過來的 params
    let formInline = {}
    for (const obj of this.formItemList) {
      if (obj.type === 'interval') {
        // 對于區(qū)間輸入框，初始化為對象
        formInline[obj.param] = obj.defaultSelect || { start: '', end: '' }
      } else {
        formInline[obj.param] = obj.defaultSelect || ''
      }
    }
    // let a = this.formItemList.find((item) => {
    //   console.log("@formInline", formInline);
    //   if ("maxlength" in item) return item;
    // });
    // console.log("@aaaaa", a);
    // console.log("@regionData[0]", regionData[0]);
    // console.log("@regionData", regionData);
    // console.log("@this.formItemList", formInline);
    return {
      formInline,
      options: regionData, // 必須是數(shù)組  ==》  獲取單個省  [regionData[0]]
      selectedOptions: [],
      cityList: [],
      quList: [],
      intervalParam: { start: '', end: '' }, // input 區(qū)間
    }
  },
  watch: {
    formItemList: {
      handler(newVal, oldVal) {
        for (const obj of this.formItemList) {
          if (obj.defaultSelect) {
            formInline[obj.param] = obj.defaultSelect
          }
        }
      },
      deep: true,
    },
  },
  mounted() {
    // console.log("@傳過去的值", this.formItemList);
  },
  methods: {
    onSubmit() {
      // console.log("submit!", this.formInline);
      for (const item of this.formItemList) {
        // 確保將區(qū)間值設(shè)置到 formInline.intervalParam 中
        if (item.type === 'interval') {
          this.formInline[item.param] = {
            start: this.formInline[item.param].start,
            end: this.formInline[item.param].end,
          }
        }
      }
      this.$emit('search', this.formInline)
      // this.resetForm('ruleForm') // 查詢后清空搜索條件
      this.$emit('isShowHSearchFn')
    },
    resetForm(formName) {
      // console.log('清空條件')
      this.$refs[formName].resetFields()
      let formInline = {}
      for (const obj of this.formItemList) {
        // formInline[obj.param] = obj.defaultSelect || "";  // 重置時下拉框的默認(rèn)值如果要保留就選用這個
        if (obj.type === 'interval') {
          // 處理 區(qū)間 input 的清除
          formInline[obj.param] = { start: '', end: '' }
        } else {
          formInline[obj.param] = '' // 所有篩選條件清空
        }
      }
      this.formInline = formInline
      this.cityList = [] // 清空市級下拉
      this.quList = [] // 清空區(qū)縣下拉
    },
    // 關(guān)閉  高級查詢
    onClose() {
      this.resetForm('ruleForm')
      this.$emit('isShowHSearchFn')
    },
    // 獲取輸入框的最大長度
    getMaxLength(param, type) {
      let maxlength = this.formItemList.find(
        (item) => item.param === param && item.type === type
      ).maxlength
      return maxlength
    },
    // 獲取 輸入框的 最大位數(shù) 和最小位數(shù)
    getLimit(param, type, limitType) {
      let limit = ''
      if (limitType === 'min') {
        limit = this.formItemList.find(
          (item) => item.param === param && item.type === type
        ).min
      } else if (limitType === 'max') {
        limit = this.formItemList.find(
          (item) => item.param === param && item.type === type
        ).max
      }
      return limit
    },
    // 獲取 input的 大小 getSize、
    getSize(param, type) {
      let size = this.formItemList.find(
        (item) => item.param === param && item.type === type
      ).size
      return size
    },
    // 數(shù)字輸入框 值改變的事件
    handleChange(item) {
      let value = this.formInline[item.param]
      if (item.min && value < Number(item.min)) {
        this.formInline[item.param] = item.min
      } else if (item.max && value > Number(item.max)) {
        this.formInline[item.param] = item.max
      } else {
        this.formInline[item.param] = value
      }
    },
    // 數(shù)字輸入框 失去焦點(diǎn)的事件
    handleBlur(item) {
      let value = this.formInline[item.param]
      if (item.min && value < Number(item.min)) {
        this.formInline[item.param] = item.min
      } else if (item.max && value > Number(item.max)) {
        this.formInline[item.param] = item.max
      } else {
        this.formInline[item.param] = value
      }
    },
    provChange(val) {
      this.cityList = []
      this.quList = []
      this.formInline.City = ''
      this.formInline.AreaCounty = ''
      this.cityList = this.formItemList[3].selectOptions.filter((item) => {
        if (val === item.parentId) {
          return item
        }
      })
    },
    cityChange(val) {
      this.quList = []
      // console.log("@市", val);
      this.formInline.AreaCounty = ''
      this.quList = this.formItemList[4].selectOptions.filter((item) => {
        if (val === item.parentId) {
          return item
        }
      })
    },
    xzqChange(val) {
      // console.log("@區(qū)", val);
    },
  },
}
</script>

<style lang="less" scoped>
.searchBox {
  // height: 300px;
  width: 100%;
  // width: calc(100% - 32px);
  box-sizing: border-box;
  background: #fefefe;
  // margin-top: 45px;
  border: 1px solid #ececec;
  position: absolute;
  z-index: 999;
  // left: 10%;
  // right: 10%;
  padding: 25px 20px;
  // padding-bottom: 0;
  box-shadow: 0 7px 18px -12px #bdc0bb;
}
.dialog-search {
  margin: 0 1rem;
  text-align: left;
  // position: relative;
  // input 框 label的內(nèi)邊距
  .icon-input {
    display: flex;
  }
  /deep/ .el-form-item__label {
    padding: 0;
  }
  /deep/ .el-form-item__content {
    // width: 16rem;
    // 插槽里面的圖標(biāo)
    // border: 1px solid green;
    .slotIcon {
      // border: 1px solid green;
      margin-right: 0.3125rem /* 5px -> .3125rem */;
    }
    // input 框
    .el-input {
      width: 16rem;
    }
    // select 框
    .el-select {
      // border: 1px solid green;
      .el-input__inner {
        // width: 16rem;
      }
    }
  }
  .btn {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 1.875rem /* 30px -> 1.875rem */;
    // border: 1px solid red;
  }
}
</style>

三、表格組件 （Tables2）

<!-- Tables2 表格組件 -->
<template>
  <div>
    <!-- tableData.slice((currentPage - 1) * pageSize,currentPage * pageSize) -->
    <div class="tables">
      <el-table
        ref="multipleTable"
        :data="displayedData"
        :max-height="tableHeight"
        border
        row-key="id"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column
          :align="item.align"
          v-for="(item, index) in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :fixed="item.fixed"
          :width="item.width"
          :formatter="item.formatter"
          :sortable="item.prop !== 'index' ? false : true"
          :filters="item.prop !== 'index' ? dateFilters(item.prop) : ''"
          :filter-method="item.prop !== 'index' ? filterHandler : ''"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="210" align="center">
          <template #default="{ scope }">
            <!-- 使用插槽來展示自定義的操作按鈕 -->
            <slot name="action-buttons" :scope="scope" />
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分頁器 -->
    <div class="footer">
      <span class="demonstration">
        當(dāng)前選中
        <el-tag>{{ multipleSelection.length }}</el-tag> 條</span
      >
      <!-- computed -->
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => [],
      required: true,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    currentPage: {
      type: Number,
      default: 1,
    }, // 當(dāng)前頁碼
    total: {
      type: Number,
      default: 20,
    }, // 總條數(shù)
    pageSize: {
      type: Number,
      default: 10,
    }, // 每頁的數(shù)據(jù)條數(shù)
    tableHeight: {
      type: Number,
      default: 600,
    },
  },
  data() {
    return {
      multipleSelection: [], // 選中的值，用于以后操作
    }
  },
  components: {},
  computed: {
    displayedData() {
      return this.tableData
    },
    displayedColumns() {
      return this.columns
    },
    displayedCurrentPage: {
      get() {
        return this.currentPage
      },
      set(newValue) {
        this.$emit('update:currentPage', newValue)
      },
    },
    displayedPageSize: {
      get() {
        return this.pageSize
      },
      set(newValue) {
        this.$emit('update:pageSize', newValue)
      },
    },
    dateFilters() {
      return (columnName) => {
        const values = new Set(this.tableData.map((item) => item[columnName]))
        return Array.from(values).map((value) => ({
          text: value,
          value: value,
        }))
      }
    },
  },

  mounted() {},
  watch: {},
  methods: {
    // 獲取選中的值
    handleSelectionChange(val) {
      console.log('@選中的值', val)
      this.multipleSelection = val
    },
    /****** computed *******/
    handleSizeChange(val) {
      console.log(`每頁 ${val} 條`)
      this.$emit('update:currentPage', 1) // 修改依賴的值，會觸發(fā) displayedCurrentPage 的 set 方法
      this.$emit('update:pageSize', val) // 修改依賴的值，會觸發(fā) displayedPageSize 的 set 方法
      this.$emit('getDataList')
    },
    handleCurrentChange(val) {
      console.log(`當(dāng)前頁: ${val}`)
      this.$emit('update:currentPage', val) // 修改依賴的值，會觸發(fā) displayedCurrentPage 的 set 方法
      this.$emit('getDataList')
    },
    // 根據(jù)該列 對應(yīng)的選項(xiàng) 返回對應(yīng)的行
    filterHandler(value, row, column) {
      const property = column['property']
      return row[property] === value
    },
  },
}
</script>
<style lang="less" scoped>
.footer {
  position: absolute;
  //   bottom: 0;
  right: 0;
  padding-top: 15px;
  font-size: 14px;
  width: 100%;
  // border-top: 1px solid #a29696;
  line-height: 2.25rem /* 36px -> 2.25rem */;
  display: flex;
  justify-content: flex-end;
  .demonstration {
    margin-right: 0.625rem /* 10px -> .625rem */;
  }
  /deep/ .el-pagination {
    padding-top: 5px;
    line-height: 30px;
  }
}
</style>

四、配置項(xiàng)

/******* 表格列的配置 （字段） ********/
const columns = [
  {
    prop: 'index',
    label: '序號',
    width: '80',
    fixed: 'left',
    align: 'center',
  },
  {
    prop: 'name',
    label: '姓名',
    //   width: '180',
    align: 'center',
  },
  {
    prop: 'issue',
    label: '期次',
    //   width: '180',
    align: 'center',
    formatter: function(row, column, cellValue, index) {
      if (row.issue === '6') {
        return <el-tag style="backgroundColor: #bf933f;">{row.issue}</el-tag>
      } else {
        return <el-tag type="success">{row.issue}</el-tag>
      }
    },
  },
  {
    prop: 'creator',
    label: '上傳人',
    //   width: '180',
    align: 'center',
  },
  {
    prop: 'createDate',
    label: '上傳時間',
    //   width: '180',
    align: 'center',
  },
  {
    prop: 'size',
    label: '文件大小',
    //   width: '180',
    align: 'center',
  },
]
export { columns }

/******* 高級查詢的配置 ********/
const formItemList = [
  {
    label: '單位名稱：',
    type: 'input',
    param: 'unit_name',
  },
  {
    label: '?。?,
    type: 'proSelect',
    selectOptions: [],
    param: 'prov',
  },
  {
    label: '市：',
    type: 'citySelect',
    selectOptions: [],
    param: 'city',
  },
  {
    label: '區(qū)縣：',
    type: 'xzqSelect',
    selectOptions: [],
    param: 'xzqdm',
  },
  {
    label: '聯(lián)系人：',
    type: 'input',
    param: 'linkman',
  },
]
export { formItemList }

五、父頁面

<!-- 測試頁面 -->
<template>
  <div>
    <div class="wrap">
      <Header
        ref="Header"
        :title="title"
        :input-type="inputType"
        :input-placeholder="inputPlaceholder"
        :select-placeholder="selectPlaceholder"
        :options="options"
      >
        <template v-slot:button-list>
          <!-- 按鈕列表 -->
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            @click="search"
          >
            查詢
          </el-button>
          <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            plain
            @click="showHsearch"
          >
            高級查詢
          </el-button>
          <el-button type="primary" size="small" icon="el-icon-search" plain>
            添加
          </el-button>
        </template>
      </Header>
      <div class="content">
        <!-- 高級查詢 -->
        <SearchCondition
          :formItemList="formItemList"
          :emitSearch="emitSearch"
          @search="hSearch"
          @isShowHSearchFn="isShowHSearchFn"
          :isShowSearch="isShowHSearch"
        />
        <!-- 表格 v-model 對應(yīng) computed -->
        <Tables
          v-model:tableData="tableData"
          v-model:currentPage="currentPage"
          v-model:pageSize="pageSize"
          :total="total"
          :columns="columns"
          :tableHeight="tableHeight"
          @getDataList="getWeekList"
        >
          <!-- 使用插槽來配置自定義的操作按鈕 -->
          <template #action-buttons="scope">
            <el-button
              link
              type="primary"
              size="mini"
              @click.prevent="viewRow(scope)"
            >
              查看
            </el-button>
            <el-button
              link
              type="primary"
              size="mini"
              @click.prevent="editRow(scope)"
            >
              編輯
            </el-button>
            <el-button
              link
              type="primary"
              size="mini"
              @click.prevent="deleteRow(scope)"
            >
              刪除
            </el-button>
          </template>
        </Tables>
      </div>
    </div>
  </div>
</template>

<script>
import SearchCondition from '@/Tcomponents/SearchCondition.vue'
import Header from '@/Tcomponents/Header.vue'
import Tables from '@/Tcomponents/Tables2.vue'
import { WeeklyReportReq } from '@/api/methods'
import { columns } from './options/column'
import { formItemList } from './options/formItemList'
export default {
  data() {
    return {
      /********* Header 組件 - start ***********/
      title: '測試頁面',
      inputType: 'input',
      inputPlaceholder: '請輸入內(nèi)容',
      selectPlaceholder: '請選擇內(nèi)容',
      // inputType 是 select 的時候需要配置
      options: [
        { label: '選項(xiàng)11', value: 'value11' },
        { label: '選項(xiàng)22', value: 'value22' },
        { label: '選項(xiàng)33', value: 'value33' },
        // 添加更多選項(xiàng)...
      ],
      /********* Header 組件 - end ***********/

      /********* 高級查詢組件 - start *********/
      // 是否顯示高級查詢
      isShowHSearch: false,
      emitSearch: false,
      // 查詢組件的配置項(xiàng)
      formItemList: formItemList,
      /********* 高級查詢組件 - end *********/

      /********* 表格組件 - start *********/
      tableData: [
        {
          createDate: '2023-08-08 15:22:25',
          createID: 1,
          creator: '超級管理員',
          id: '868191e5-df45-446a-b759-2e38e1cac95c',
          issue: '2',
          name: '20230726153935新建 DOCX 文檔',
          size: '9KB',
        },
        {
          createDate: '2023-08-08 15:22:25',
          createID: 1,
          creator: '超級管理員',
          id: '868191e5-df45-446a-b759-2e38e1cac95c',
          issue: '2',
          name: '20230726153935新建 DOCX 文檔',
          size: '9KB',
        },
        {
          createDate: '2023-08-08 15:22:25',
          createID: 1,
          creator: '超級管理員',
          id: '868191e5-df45-446a-b759-2e38e1cac95c',
          issue: '2',
          name: '20230726153935新建 DOCX 文檔',
          size: '9KB',
        },
        {
          createDate: '2023-08-08 15:22:25',
          createID: 1,
          creator: '超級管理員',
          id: '868191e5-df45-446a-b759-2e38e1cac95c',
          issue: '2',
          name: '20230726153935新建 DOCX 文檔',
          size: '9KB',
        },
      ],
      columns: columns,
      // multipleSelection: [],
      currentPage: 1, // 當(dāng)前頁碼
      total: 20, // 總條數(shù)
      pageSize: 10, // 每頁的數(shù)據(jù)條數(shù)
      tableHeight: null,
      /********* 表格組件 - end *********/
    }
  },
  components: { SearchCondition, Header, Tables },
  computed: {},
  mounted() {
    this.getDomHeight()
    this.getWeekList()
  },
  methods: {
    // 查詢
    search() {
      console.log('@點(diǎn)擊查詢=獲取參數(shù)', this.$refs.Header.searchValue)
      this.getWeekList()
    },
    // 高級查詢(打開高級查詢)
    showHsearch() {
      this.$refs.Header.searchValue = ''
      this.isShowHSearch = !this.isShowHSearch
    },
    // 獲取高級查詢參數(shù)
    hSearch(params) {
      console.log('高級查詢的參數(shù)', params)
    },
    // 高級查詢里面的關(guān)閉
    isShowHSearchFn() {
      this.isShowHSearch = !this.isShowHSearch
    },
    // 動態(tài)獲取表格的高度
    getDomHeight() {
      setTimeout(() => {
        const content = document.querySelector('.content').offsetHeight
        const footer = document.querySelector('.footer').offsetHeight
        this.tableHeight = content - footer
      }, 200)
    },
    viewRow(row) {
      console.log('@viewRow', row)
    },
    editRow(row) {
      console.log('@editRow', row)
    },
    deleteRow(row) {
      console.log('@deleteRow', row)
    },
    // 測試 調(diào)用數(shù)據(jù)
    async getWeekList() {
      let params = {
        pageindex: this.currentPage,
        pagesize: this.pageSize,
        name: this.$refs.Header.searchValue,
      }
      let res = await WeeklyReportReq(params)
      res.data.data.forEach((item, index) => {
        item.index = ++index
      })
      // this.tableData = res.data.data
      // console.log('@this.tableData', this.tableData)
      this.total = res.data.total
    },
  },
}
</script>
<style lang="less" scoped>
  // @import '@/assets/css/page.less';
    /* page.less */

.wrap {
    height: calc(100vh - 95px);
    width: 100%;
    padding: 15px;
    .content {
        margin-top: 15px;
        height: calc(100% - 50px);
        position: relative;
        .footer {
            position: absolute;
            right: 0;
            padding-top: 15px;
            font-size: 14px;
            width: 100%;
            line-height: 2.25rem;
            display: flex;
            justify-content: flex-end;
            .demonstration {
                margin-right: 0.625rem;
            }
            /deep/ .el-pagination {
                padding-top: 5px;
                line-height: 30px;
            }
        }
    }
  }
</style>

到了這里，關(guān)于【代碼】表格封裝 + 高級查詢 + 搜索 +分頁器 （極簡）的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！