实现vue iview table组件加input搜索框 点击表格详情 和分页器功能的记录（动态渲染）

关于实现vue iview table组件加input搜索框 点击表格详情 和分页器功能的记录（动态渲染）
后面发现如果列太多会出现2个滚动条（已解决）
完整版更新
参考地址：https://github.com/azhengyongqin/iview-filter-table.git
父组件

<template>
  <div>
    <Example :menuID="menuID" />
  </div>
</template>
<script>
import Example from '@/components/TableEx/Example'
import store from "@/store";
export default {
  name: 'tabledetails',
  components: { Example },
  data () {
    return {
      //拿到的ID
      menuID: ''
    }
  },
  methods: {
    // 获取ID
    getId () {
      this.menuID = this.$store.getters.newid
      console.log(this.menuID);
    }

  },
  mounted () {

  },
  created () {
    // 拿到ID
    // console.log(this.$store.getters.newid);
    this.getId()
  }
}
</script>


<style  lang="scss" scoped>
</style>

子组件

<template>
  <div class="hello">
    <h1>{{ sontablename }}</h1>
    <!-- 搜索栏 -->
    <div class="seek">
      <Input
        v-model="input"
        placeholder="请输入内容..."
        clearable
        style="width: 200px"
      />
      <Button type="primary" @click="seek">搜索</Button>
    </div>
    <div>
      <div class="updiv">
        <Table
          height="625"
          border
          id="uptable"
          :data="filters"
          class="uptable"
          :columns="tableColumnsFilters"
          stripe
        >
        </Table>
      </div>
      <!-- :show-header=false -->
      <Table
        border
        id="downtable"
        :data="users"
        height="537"
        :columns="tableColumns"
        highlight-row
        @on-current-change="handleRowChange"
        stripe
        @on-row-click="modal1 = true"
      >
      </Table>
    </div>
    <!-- 分页器 -->
    <div class="page">
      <Page
        :total="dataCount"
        :page-size="pageSize"
        show-total
        class="paging"
        @on-change="changepage"
      ></Page>
    </div>
    <!-- 详情弹出框 -->
    <Modal v-model="modal1" title="详细信息" width="90" draggable @on-ok="ok">
      <div class="details">
        <div class="details-left">
          <!-- 渲染说明
          {{newdata6}} -->
          <Table height="600" :columns="columns1" :data="data1"></Table>
        </div>
        <div class="details-right">
          <Maps />
        </div>
      </div>
      <div class="image">
        照片名字
        <el-image
          style="width: 200px; height: 200px"
          :src="url"
          :preview-src-list="srcList"
        >
        </el-image>
      </div>
    </Modal>
  </div>
</template>


<script>
import $ from "jquery";
import FilterTable from "./FilterTable";
import store from "@/store";
import { getinquire, fatherrefer } from "@/api/table";
import { getOptions } from "@/api/dynamicexec";
export default {
  name: "Example",
  props: ["menuID"],
  components: { FilterTable },
  data() {
    return {
      // 顶部搜索栏
      input: "",
      // 弹出框数据
      modal1: false,
      newdata6: [],
      showIndex: true,
      // 图片预览
      url:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      srcList: [
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=374592787,881307294&fm=15&gp=0.jpg",
      ],
      // 弹出框表格内容
      columns1: [
        {
          title: "名称",
          key: "name",
        },
        {
          title: "字段名",
          key: "prop",
        },
        {
          title: "安卓录入规则",
          key: "address",
        },
      ],
      data1: [
        {
          name: "系统编码",
          prop: "epc",
          address: "扫描RFID取得",
        }
      ],
      // 表格内容
      users: [
        {
          epc: "小明",
          data1: "17760172601",
          data2: "1023007219@qq.com",
          data3: "50",
          data4: "50",
          formatter: "1",
          data5: "2020-02-03",
        },
      ],
      // 列描述数据对象
      tableColumns: [],
      // 获取到具体表单ID
      sontableid: "",
      // 获取具体表单属性
      tableattribute: [],
      // 表单名字
      sontablename: "",
      // 定义的表格样式
      newcolumns7: [],
      // 上面表格数据
      filters: [
        {
          title: "",
        },
      ],
      tableColumnsFilters: [],
      search: {}, //过滤条件保存的对象,就是保存Input框和Select中值
      filter: {},
      // Select选项
      label: "",
      value: "",
      dataSource: "",
      option: [],

      // 分页数据
      ajaxHistoryData: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      // 分页器相关
      historyData: [],
      uptable: "",
      downtable: "",
    };
  },
  created() {
    // 分页器
    this.handleListApproveHistory();
    // 获取对应的表格信息
    this.getTable();
  },
  mounted() {
    // 滚动一个滚动条同时滚动多个table
    $(".ivu-table-body").scroll(function () {
       $(".ivu-table-body").scrollLeft($(this).scrollLeft());
    });
  },
  watch: {},
  methods: {
    // 表格点击事件
    handleRowChange(currentRow, oldCurrentRow) {
      console.log(currentRow);
      // console.log(oldCurrentRow);
      this.newdata6.push(currentRow);
    },
    // 顶部搜索栏事件
    seek() {
      console.log(this.input);
    },
    // 点击弹出框确定事件
    ok() {
      this.$Message.info("Clicked ok");
      console.log(this.data6);
    },
    // 获取对应的表格信息
    getTable() {
      new Promise((resolve, reject) => {
        getinquire(this.menuID)
          .then((res) => {
            res.data.forEach((item) => {
              this.sontablename = item.itemName;
              this.sontableid = item.id;
            });
            resolve();
          })
          .catch((error) => {
            console.log(error);
            reject(error);
          });
      })
        .then(() => {
          // 获取到具体表格内容
          // console.log(1);
          return new Promise((resolve, reject) => {
            fatherrefer(this.sontableid)
              .then((res) => {
                // console.log(res.data);
                res.data.forEach((item) => {
                  // console.log(item.dataSource);
                  // this.dataSource = item.dataSource;
                  this.tableattribute.push(item);
                });
                resolve();
              })
              .catch((error) => {
                console.log(error);
                reject(error);
              });
          });
        })
        .then(() => {
          // console.log(2);
          // console.log(this.tableattribute);
          return new Promise((resolve, reject) => {
            if (this.tableattribute.length > 1) {
              this.tableattribute.forEach((item) => {
                // console.log(item);
                if ((item.dataSource = "string" || item.dataSource != "")) {
                  resolve();
                } else if (item.dataSource != "string" && item.dataSource != "") {
                  // console.log(item.dataSource);
                  // 获取下拉菜单
                  getOptions(item.dataSource)
                    .then((res) => {
                      // console.log(res.data);
                      this.option = res.data;
                      // console.log(this.option);
                      this.option.forEach((item) => {
                        // console.log(item);
                        this.label = item.label;
                        // console.log(item.value);
                        this.value = item.value;
                      });
                      resolve();
                    })
                    .catch((error) => {
                      console.log(error);
                    });
                }
              });
            }
          });
        })
        .then(() => {
          // console.log(3);
          return new Promise((resolve, reject) => {
            if (this.tableattribute.length > 1) {
              this.tableattribute.forEach((item) => {
                let newcolumns = {
                  id: item.order,
                  title: item.label,
                  key: item.prop,
                  type: item.type,
                  width: item.width,
                  align: item.align,
                  filterType: item.filterType,
                  fixed: item.fixed,
                  sortable: item.sortable,
                  dataSource: item.dataSource,
                  filter: {
                    option: this.option,
                    type: item.filterType,
                  },
                };
                this.formatter = item.formatter;
                this.newcolumns7.push(newcolumns);
                this.newcolumns7.sort(function (a, b) {
                  return a.id - b.id;
                });
                this.tableColumns = this.newcolumns7;
                // console.log(this.tableColumns);
                this.getTableone();
              });
            }
          });
        });
    },
    // 获取的表格信息给到第一个Table里面
    getTableone() {
      for (let index in this.tableColumns) {
        // console.log( this.tableColumns[index-1].title);
        let filter = {};
        /**
         * 因为是采用的两个表的形式,过滤表中显示查询的Input,Select条件输组件,表头显示的是数据表的表头,渲染的数据是传入的columns中的filter字段
         * 数据表隐藏表头,只显示数据,渲染的数据是传入的columns中的key值
         */
        //将传入的列描述数据对象(columns) 的参数 复制给 过滤表的列描述数据对象(tableColumnsFilters)
        this.$set(filter, "title", this.tableColumns[index].title);
        this.$set(filter, "fixed", this.tableColumns[index].fixed);
        this.$set(filter, "align", this.tableColumns[index].align);
        this.$set(filter, "sortable", this.tableColumns[index].sortable);
        this.$set(filter, "width", this.tableColumns[index].width);
        this.$set(filter, "filterType", this.tableColumns[index].filterType);
        let render = (h) => {};
        /**
       * 需要有搜索的列, 只要在 列描述数据对象columns中配置 filter属性就行如下:
       {
          title: '名字',
          key: '_id',
          filter: {
            type: 'Input'
          }
        },
       {
         title: '交易金额 (元)',
         key: 'money',
         filter: {
           type: 'Select',
           option:status //选项
         }
       },
       */
        //如果存在 过滤选项
        if (this.tableColumns[index].filter) {
          //过滤为 下拉选择框
          if (
            this.tableColumns[index].filter.type &&
            this.tableColumns[index].filter.type === "Select"
          ) {
            render = (h) => {
              return h(
                this.tableColumns[index].filter.type,
                {
                  props: {
                    value: 0, //Select选项列表一般 0 为全部
                  },
                  on: {
                    "on-change": (val) => {
                      if (val === 0) {
                        //当选项是全部的时候删除 search中该字段的过滤条件
                        this.$delete(this.search, this.tableColumns[index].key);
                        return;
                      }
                      //添加字段过滤条件
                      this.$set(this.search, this.tableColumns[index].key, val);
                      // console.log(this.search);
                    },
                  },
                },
                this.createOptionsRender(index, h)
              );
            };
          } else if (
            this.tableColumns[index].filter.type &&
            this.tableColumns[index].filter.type === "Input"
          ) {
            //如果是输入框
            render = (h) => {
              //获取输入框的值,为了减少数据库的压力,我这里是
              //通过回车和点击搜索按钮才进行数据过滤查询,如果
              //要输入框变化就进行过滤,把 this.load()放到
              //input事件方法就行了
              let inputValue = {};
              return h(this.tableColumns[index].filter.type, {
                props: {
                  placeholder: "输入" + this.tableColumns[index].title,
                  icon: "ios-search",
                },
                on: {
                  input: (val) => {
                    inputValue = val;
                    if (!inputValue) {
                      this.validInputValue(index, inputValue);
                    }
                    this.$set(
                      this.search,
                      this.tableColumns[index].key,
                      inputValue
                    );
                  },
                  //input框后面的搜索按钮的点击事件
                  "on-click": () => {
                    this.validInputValue(index, inputValue);
                  },
                  "on-enter": () => {
                    this.validInputValue(index, inputValue);
                  },
                },
              });
            };
          } else {
            //如果是按钮
          }
        }
        this.$set(filter, "render", render);
        // console.log(filter);
        this.filter = filter;
      }

      this.tableColumnsFilters.push(this.filter);
    },

    createOptionsRender(index, h) {
      // console.log(this.tableColumns[index].filter);
      //选项渲染
      let optionRender = [];
      if (this.tableColumns[index].filter.option) {
        let option = this.tableColumns[index].filter.option;
        // console.log(option);
        for (let i in option) {
          optionRender.push(
            h(
              "Option",
              {
                props: {
                  labei: option[i].labei,
                  value: option[i].value,
                },
              },
              option[i].label
            )
          );
        }
      }
      return optionRender;
    },

    //验证输入框的值
    validInputValue(index, inputValue) {
      if (!inputValue) {
        this.$delete(this.search, this.tableColumns[index].key);
        return;
      }
      this.$set(this.search, this.tableColumns[index].key, inputValue);
      // 传给后台的数据
      console.log(JSON.stringify(this.search, null, 4));
    },

    formatStatus(value, status) {
      return status[value] || { value: "", name: "" };
    },
    // 分页器事件
    handleListApproveHistory() {
      // 保存取到的所有数据
      this.ajaxHistoryData = this.users;
      this.dataCount = this.users.length;
      // 初始化显示，小于每页显示条数，全显，大于每页显示条数，取前每页条数显示
      if (this.users.length < this.pageSize) {
        this.users = this.ajaxHistoryData;
      } else {
        this.users = this.ajaxHistoryData.slice(0, this.pageSize);
      }
    },
    changepage(index) {
      var _start = (index - 1) * this.pageSize;
      var _end = index * this.pageSize;
      this.users = this.ajaxHistoryData.slice(_start, _end);
    },
  },
};
</script>

<style scoped lang="scss">
h1 {
  // border: 1px solid red;
  box-shadow: 0px 3px 7px 2px rgba(26, 25, 25, 0.18);
  background-color: #9ec8ff;
  color: white;
  text-align: center;
  margin-bottom: 10px;
}
.updiv {
  position: relative;
  // margin-bottom: 20px;
  height: 88px;
}
.uptable {
  position: relative;
  height: 233px;
  margin-right: 17px;
}
.seek {
  display: flex;
  margin: 10px 0px 15px 15px;
  .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: 200px;
    margin-right: 10px;
  }
}
.details {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.details .details-left {
  width: 30%;
}
.details .details-right {
  width: 70%;
}
//弹出框图片位置
.image {
  height: 200px;
  border: 1px solid red;
  img {
    height: 200px;
  }
}
//分页器
.page {
  display: flex;
  flex-direction: row-reverse;
  margin-top: 10px;
  margin-right: 50px;
}
</style>