vue基于elementUI集成搜索与分页的grid组件

文件grid.vue为表格组件
index.vue为使用grid组件的demo
result.json为结果的json文件
在grid组件中想要回调父组件中的方法需要在grid组件中声明:
v-on:onDataBound="onDataBound"
onDataBound=回调名称
"onDataBound"=回调的方法
command数据列中的回调方法均会返回当前列的数据
toolbar数据列中的回调方法均会返回复选框的选中数据id

<template>
  <div class="table-box" v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(255,255,255,0.5)">
    <div class="toolbar" v-if="toolbar">
      <el-button v-for="item in toolbar" size="mini" round :type="item.type" :key="item.name"
                 @click="itemMethod(item.click,checkedLists)">
        {{item.text}}
      </el-button>
    </div>
    <table>
      <thead>
      <tr>
        <th v-if="check" width="5px">
          <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"></el-checkbox>
        </th>
        <th v-if="command">
          操作
        </th>
        <th v-for="column in columns"
            @click="sortBy(column.name)"
            :class="{ active: sortKey == column.name }"
            :key="column.name" :width="column.width">
          {{ column.title}}
          <span class="arrow" :class="sortOrders[column.name] > 0 ? 'asc' : 'dsc'">
          </span>
        </th>
      </tr>
      <tr>
        <td v-if="check"></td>
        <td v-if="command"></td>
        <td v-for="column in columns" :key="column.name">
          <el-input class="searchInput"
                    @keyup.enter.native="enterSerachInput"
                    :name="column.name"></el-input>
        </td>
      </tr>
      </thead>
      <tbody>
      <tr v-for="entry in filteredData" v-if="filteredData.length >0"
          :key="entry.name">
        <td v-if="check">
          <el-checkbox-group v-model="checkedLists" @change="handleCheckedChange">
            <el-checkbox :key="entry.id" :label="entry.id"></el-checkbox>
          </el-checkbox-group>
        </td>
        <td v-if="command">
          <el-tooltip class="item" effect="dark"
                      :content='com.tooltip' placement="right-start"
                      :disabled="!com.tooltip" v-for="com in command" :key="com.name">
            <a style="cursor: pointer" v-html="com.text" :name="com.name" @click="itemMethod(com.click,entry)"
               :id="com.name+entry.id">
              {{com.text}}
            </a>
          </el-tooltip>
        </td>
        <td v-for="column in columns" :key="column.name">
          <el-tooltip class="item" effect="dark"
                      :content='entry[column.name]' placement="right-start"
                      :disabled="!column.tooltip">
            <span>{{entry[column.name]}}</span>
          </el-tooltip>
        </td>
      </tr>
      </tbody>
    </table>
    <div>
      <el-pagination
        layout="prev, pager, next"
        :total="totalCount"
        :page-size="requestInfo.pageSize"
        @current-change="pageChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
const checkBoxOptions = []
export default {
  name: 'grid',
  props: {
    data: Object,
    columns: Array,
    check: Boolean,
    requestInfo: Object,
    command: Array,
    toolbar: Array,
    loading: Boolean
  },
  data: function () {
    var sortOrders = {}
    this.columns.forEach(function (key) {
      sortOrders[key.name] = 1
    })
    return {
      sortKey: '',
      sortOrders: sortOrders,
      searchValus: new Map(),
      isIndeterminate: false,
      checkAll: false,
      checkedLists: [],
      filter: {},
      filters: {}
    }
  },
  computed: {
    // 数据
    filteredData: function () {
      var sortKey = this.sortKey
      var order = this.sortOrders[sortKey] || 1
      var data = this.data.data
      if (sortKey) {
        data = data.slice().sort(function (a, b) {
          a = a[sortKey]
          b = b[sortKey]
          return (a === b ? 0 : a > b ? 1 : -1) * order
        })
      }
      return data
    },
    // 总页数
    totalCount: function () {
      var total = 0
      if (undefined !== this.data.total) {
        total = this.data.total
      }
      return total
    }
  },
  filters: {
    capitalize: function (str) {
      return str.charAt(0).toUpperCase() + str.slice(1)
    }
  },
  methods: {
    sortBy: function (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    },
    // 搜索框失去焦点的时候
    serachInputBlur (event) {
      const obj = event.path[0]
      const oldVal = this.searchValus.get(obj.name)
      // 如果数据已经修改则发起请求
      if (oldVal !== obj.value) {
        if (obj.value !== '') {
          const filterContent = {}
          filterContent['operator'] = 'contains'
          filterContent['value'] = obj.value
          filterContent['field'] = obj.name
          this.filters[obj.name] = filterContent
        } else {
          delete this.filters[obj.name]
        }
        const filters = []
        for (var key in this.filters) {
          filters.push(this.filters[key])
        }
        this.filter['logic'] = 'and'
        this.filter['filters'] = filters
        this.$emit(this.requestInfo.callMethod, 1, this.filter)
      }
    },
    // 搜索框获取焦点的时候
    serachInputFocu (event) {
      const obj = event.path[0]
      this.searchValus.set(obj.name, obj.value)
    },
    // 在搜索框着输入确认键的事件
    enterSerachInput (e) {
      var keyCode = window.event ? e.keyCode : e.which
      if (keyCode === 13) {
        this.serachInputBlur(window.event)
        this.serachInputFocu(window.event)
      }
    },
    // 页面更新事件
    pageChange (page) {
      // 需要在gird中定义v-on:this.requestInfo.callMethod="你的方法"
      this.$emit(this.requestInfo.callMethod, page, this.filter)
    },
    // 全选复选框事件
    handleCheckAllChange (val) {
      this.checkedLists = val ? checkBoxOptions : []
      this.isIndeterminate = false
    },
    // 单选事件
    handleCheckedChange (value) {
      let checkedCount = value.length
      this.checkAll = checkedCount === checkBoxOptions.length
      this.isIndeterminate = checkedCount > 0 && checkedCount < checkBoxOptions.length
    },
    // 点击事件的调用
    itemMethod (callMethod, item) {
      // 需要在gird中定义v-on:callMethod="你的方法"
      this.$emit(callMethod, item)
    }
  },
  watch: {
    // 监听数据的变化，改变复选框的数据
    filteredData (a, b) {
      a.forEach(function (info) {
        checkBoxOptions.push(info.id)
      })
    }
  },
  mounted () {
    // 如果有配置初始化回调的话回调父级指定方法
    if (this.requestInfo.dataBound) {
      this.$emit(this.requestInfo.dataBound)
    }
  }
}
</script>

<style scoped lang="stylus">
  body {
    font-family: Helvetica Neue, Arial, sans-serif;
    font-size: 14px;
    color: #444;
  }

  .table-box {
    display: grid;
    grid-template-rows: 35px 1fr 50px;
  }

  table {
    border: 2px solid #e2efef;
    border-radius: 3px;
    background-color: #fff;
    width: 100%;
  }

  th {
    background-color: #e2efef;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color black
  }

  tr:hover {
    background-color: #f9f9f9;
  }

  th, td {
    padding: 10px 7px;
  }

  td /deep/ .el-checkbox__label {
    position absolute
    top -9999px
    left -9999px
  }

  th.active .arrow {
    opacity: 1;
  }

  .arrow {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    margin-left: 5px;
    opacity: 0.66;
  }

  .arrow.asc {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 4px solid black;
  }

  .arrow.dsc {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid black;
  }

  .searchInput /deep/ .el-input__inner {
    height 27px
  }

  .toolbar {
    float left
    padding-left 10px
    background #f9f9f9
    line-height 25px
    display: flex;
    align-items: Center;
  }

</style>

<template>
  <grid
    :data="gridData"
    :columns="gridColumns"
    :check="check"
    :requestInfo="requestInfo"
    :command="command"
    :toolbar="toolbar"
    :loading="loading"
    v-on:callGetInfo="callGetInfo"
    v-on:editInfo="editInfo"
    v-on:create="create"
    v-on:onDataBound="onDataBound"
  >
  </grid>
</template>

<script>
import axios from 'axios'
import {mapState} from 'vuex'
import Grid from '../components/grid'

export default {
  components: {Grid},
  name: 'index',
  data () {
    return {
      // 请求信息
      requestInfo: {
        // 刷新页面的回调方法
        'callMethod': 'callGetInfo',
        // 每页大小
        'pageSize': 18,
        // 数据初始化完成后的回调
        'dataBound': 'onDataBound'
      },
      // 列信息
      gridColumns: [
        // 名称，标题，是否使用tooltip，宽度
        {name: 'linkMan', title: '名称', tooltip: true, width: '120px'},
        {name: 'linkPhone', title: '联系电话'},
        {name: 'organizationCode', title: '组织机构编码'},
        {name: 'organizationName', title: '组织机构名称'},
        {name: 'remaker', title: '备注'}
      ],
      // 列数据
      gridData: {},
      // 是否显示载入图标
      loading: false,
      // 列按钮信息
      command: [
        {name: 'opEdit', text: '<span class="el-icon-location"></span>', tooltip: '编辑', click: 'editInfo'}
      ],
      // 自定义事件回调方法
      callMethods: {'callGetInfo': 'callGetInfo', 'editInfo': 'editInfo'},
      // 是否显示复选框
      check: true,
      // 上方工具条
      toolbar: [
        {name: 'opCreate', text: '超小按钮', click: 'create', type: 'primary'}
      ]
    }
  },
  methods: {
    callGetInfo (page, filter) {
      const param = {}
      if (page === undefined) {
        page = 1
      }
      param['page'] = page
      param['pageSize'] = this.requestInfo.pageSize
      param['filter'] = filter
      this.loading = true
      //{"total":44,"data":[{"id":16,"organizationName":"信息管理部","linkMan":"王伟华","linkPhone":"13435784959","address":null,"remaker":null,"serverFlag":0,"organizationCode":"xgb","version":0},{"id":17,"organizationName":"管理员","linkMan":"王伟华","linkPhone":"13435784959","address":null,"remaker":null,"serverFlag":0,"organizationCode":"admin","version":0},{"id":18,"organizationName":"管理员","linkMan":"王伟华","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":0},{"id":19,"organizationName":"\t管理员","linkMan":"王伟华20","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":1},{"id":20,"organizationName":"\t管理员","linkMan":"王伟华21","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":2},{"id":21,"organizationName":"\t管理员","linkMan":"王伟华22","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":3},{"id":22,"organizationName":"\t管理员","linkMan":"王伟华23","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":4},{"id":23,"organizationName":"\t管理员","linkMan":"王伟华24","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":5},{"id":24,"organizationName":"\t管理员","linkMan":"王伟华25","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":6},{"id":25,"organizationName":"\t管理员","linkMan":"王伟华26","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":7},{"id":26,"organizationName":"\t管理员","linkMan":"王伟华27","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":8},{"id":27,"organizationName":"\t管理员","linkMan":"王伟华28","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":9},{"id":28,"organizationName":"\t管理员","linkMan":"王伟华29","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":10},{"id":29,"organizationName":"\t管理员","linkMan":"王伟华30","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":11},{"id":30,"organizationName":"\t管理员","linkMan":"王伟华31","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":12},{"id":31,"organizationName":"\t管理员","linkMan":"王伟华32","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":13},{"id":32,"organizationName":"\t管理员","linkMan":"王伟华33","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":14},{"id":33,"organizationName":"\t管理员","linkMan":"王伟华34","linkPhone":"13435784959","address":"","remaker":"","serverFlag":0,"organizationCode":"admin","version":15}],"aggregates":{}}
      axios.post('/apis/base/organization/loadData?token=' + this.token, param, {headers: {'Content-Type': 'application/json'}})
        .then((res) => {
          const result = res.data
          console.log(JSON.stringify(result))
          this.loading = false
          this.gridData = result
        })
    },
    editInfo (item) {
      console.log(item)
    },
    create (checkedInfo) {
      console.log(checkedInfo)
    },
    onDataBound () {
      console.log('onDataBound')
    }
  },
  computed: {
    ...mapState({
      token: 'token'
    })
  },
  mounted () {
    this.callGetInfo(1)
  }
}
</script>
<style scoped lang="stylus">

</style>

{
	"total": 44,
	"data": [{
		"id": 16,
		"organizationName": "信息管理部",
		"linkMan": "王伟华",
		"linkPhone": "13435784959",
		"address": null,
		"remaker": null,
		"serverFlag": 0,
		"organizationCode": "xgb",
		"version": 0
	}, {
		"id": 17,
		"organizationName": "管理员",
		"linkMan": "王伟华",
		"linkPhone": "13435784959",
		"address": null,
		"remaker": null,
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 0
	}, {
		"id": 18,
		"organizationName": "管理员",
		"linkMan": "王伟华",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 0
	}, {
		"id": 19,
		"organizationName": "\t管理员",
		"linkMan": "王伟华20",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 1
	}, {
		"id": 20,
		"organizationName": "\t管理员",
		"linkMan": "王伟华21",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 2
	}, {
		"id": 21,
		"organizationName": "\t管理员",
		"linkMan": "王伟华22",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 3
	}, {
		"id": 22,
		"organizationName": "\t管理员",
		"linkMan": "王伟华23",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 4
	}, {
		"id": 23,
		"organizationName": "\t管理员",
		"linkMan": "王伟华24",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 5
	}, {
		"id": 24,
		"organizationName": "\t管理员",
		"linkMan": "王伟华25",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 6
	}, {
		"id": 25,
		"organizationName": "\t管理员",
		"linkMan": "王伟华26",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 7
	}, {
		"id": 26,
		"organizationName": "\t管理员",
		"linkMan": "王伟华27",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 8
	}, {
		"id": 27,
		"organizationName": "\t管理员",
		"linkMan": "王伟华28",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 9
	}, {
		"id": 28,
		"organizationName": "\t管理员",
		"linkMan": "王伟华29",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 10
	}, {
		"id": 29,
		"organizationName": "\t管理员",
		"linkMan": "王伟华30",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 11
	}, {
		"id": 30,
		"organizationName": "\t管理员",
		"linkMan": "王伟华31",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 12
	}, {
		"id": 31,
		"organizationName": "\t管理员",
		"linkMan": "王伟华32",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 13
	}, {
		"id": 32,
		"organizationName": "\t管理员",
		"linkMan": "王伟华33",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 14
	}, {
		"id": 33,
		"organizationName": "\t管理员",
		"linkMan": "王伟华34",
		"linkPhone": "13435784959",
		"address": "",
		"remaker": "",
		"serverFlag": 0,
		"organizationCode": "admin",
		"version": 15
	}],
	"aggregates": {}
}