table组件引入

+export default {
+  selection: {
+    renderHeader: (h, { store }) => {
+      return (
+        <el-checkbox
+          disabled={store.states.data && store.states.data.length === 0}
+          indeterminate={
+            store.states.selection.length > 0 && !store.states.isAllSelected
+          }
+          nativeOn-click={store.toggleAllSelection}
+          value={store.states.isAllSelected}
+        />
+      )
+    },
+    renderCell: (h, { row, column, store, $index }) => {
+      return (
+        <el-checkbox
+          nativeOn-click={event => event.stopPropagation()}
+          value={store.isSelected(row)}
+          disabled={
+            column.selectable
+              ? !column.selectable.call(null, row, $index)
+              : false
+          }
+          on-input={() => {
+            store.commit('rowSelectedChanged', row)
+          }}
+        />
+      )
+    },
+    sortable: false,
+    resizable: false
+  },
+  index: {
+    renderHeader: (h, scope) => {
+      return <span>{scope.column.label || '#'}</span>
+    },
+    renderCell: (h, { $index, column }) => {
+      let i = $index + 1
+      const index = column.index
+
+      if (typeof index === 'number') {
+        i = $index + index
+      } else if (typeof index === 'function') {
+        i = index($index)
+      }
+
+      return <div>{i}</div>
+    },
+    sortable: false
+  },
+  expand: {
+    renderHeader: (h, scope) => {
+      return <span>{scope.column.label || ''}</span>
+    },
+    renderCell: (h, { row, store }, proxy) => {
+      const expanded = store.states.expandRows.indexOf(row) > -1
+      return (
+        <div
+          class={
+            'el-table__expand-icon ' +
+            (expanded ? 'el-table__expand-icon--expanded' : '')
+          }
+          on-click={e => proxy.handleExpandClick(row, e)}
+        >
+          <i class='el-icon el-icon-arrow-right' />
+        </div>
+      )
+    },
+    sortable: false,
+    resizable: false,
+    className: 'el-table__expand-column'
+  }
+}

+import lbTable from './lb-table.vue'
+export default {
+    install:(Vue) => {
+        Vue.component('lbTable',lbTable);
+    }
+}
\ No newline at end of file

+/*
+ * FileName: lb-column.vue
+ * Remark: element-column
+ * Project: lb-element-table
+ * Author: 任超
+ * File Created: Tuesday, 19th March 2019 9:58:23 am
+ * Last Modified: Tuesday, 19th March 2019 10:14:42 am
+ * Modified By: 任超
+ */
+
+<template>
+  <el-table-column v-bind="$attrs"
+    v-on="$listeners"
+    :prop="column.prop"
+    :label="column.label"
+    :type="column.type"
+    :index="column.index"
+    :column-key="column.columnKey"
+    :width="column.width"
+    :min-width="setColumnWidth(column.label)"
+    :fixed="column.fixed"
+    :scoped-slot="column.renderHeader"
+    :sortable="column.sortable || false"
+    :sort-method="column.sortMethod"
+    :sort-by="column.sortBy"
+    :sort-orders="column.sortOrders"
+    :resizable="column.resizable || true"
+    :formatter="column.formatter"
+    :show-overflow-tooltip="column.showOverflowTooltip != null ? column.showOverflowTooltip : true"
+    :align="column.align!=null ? column.align : 'left'"
+    :header-align="column.headerAlign || headerAlign || column.align || align || 'left'"
+    :class-name="column.className"
+    :label-class-name="column.labelClassName"
+    :selectable="column.selectable"
+    :reserve-selection="column.reserveSelection || false"
+    :filters="column.filters"
+    :filter-placement="column.filterPlacement"
+    :filter-multiple="column.filterMultiple"
+    :filter-method="column.filterMethod"
+    :filtered-value="column.filteredValue">
+    <template slot="header"
+      slot-scope="scope">
+      <lb-render v-if="column.renderHeader"
+        :scope="scope"
+        :render="column.renderHeader">
+      </lb-render>
+      <span v-else>{{ scope.column.label }}</span>
+    </template>
+
+    <template slot-scope="scope">
+      <lb-render :scope="scope"
+        :render="column.render">
+      </lb-render>
+    </template>
+
+    <template v-if="column.children">
+      <lb-column v-for="(col, index) in column.children"
+        :key="index"
+        :column="col">
+      </lb-column>
+    </template>
+  </el-table-column>
+</template>
+
+<script>
+import LbRender from './lb-render'
+import forced from './forced.js'
+export default {
+  name: 'LbColumn',
+  props: {
+    column: Object,
+    headerAlign: String,
+    align: String
+  },
+  components: {
+    LbRender
+  },
+  methods: {
+     
+    setColumnWidth(str) {
+        let columnWidth = 0;
+        for (let char of str) {
+          if ((char >= 'A' && char <= 'Z') || (char >= 'a' && char <= 'z')) {
+            // 如果是英文字符，为字符分配10个单位宽度，单位宽度可根据字体大小调整
+            columnWidth += 10
+          } else if (char >= '\u4e00' && char <= '\u9fa5') {
+            // 如果是中文字符，为字符分配14个单位宽度，单位宽度可根据字体大小调整
+            columnWidth += 14
+          } else {
+            // 其他种类字符，为字符分配10个单位宽度，单位宽度可根据字体大小调整
+            columnWidth += 10
+          }
+        }
+        if (columnWidth < 120) {
+          // 设置最小宽度
+          columnWidth = 120
+        }
+        return columnWidth + 'px'
+      },
+    setColumn () {
+      if (this.column.type) {
+        this.column.renderHeader = forced[this.column.type].renderHeader
+        this.column.render = this.column.render || forced[this.column.type].renderCell
+      }
+      if (this.column.formatter) {
+        this.column.render = (h, scope) => {
+          return <span>{ scope.column.formatter(scope.row, scope.column, scope.row, scope.$index) }</span>
+        }
+      }
+      if (!this.column.render) {
+        this.column.render = (h, scope) => {
+          return <span>{ scope.row[scope.column.property] }</span>
+        }
+      }
+    }
+  },
+  watch: {
+    column: {
+      handler () {
+        this.setColumn()
+      },
+      immediate: true
+    }
+  }
+}
+</script>

+/*
+ * FileName: lb-render.vue
+ * Remark: 自定义render
+ * Project: lb-element-table
+ * Author: 任超
+ * File Created: Tuesday, 19th March 2019 10:15:30 am
+ * Last Modified: Tuesday, 19th March 2019 10:15:32 am
+ * Modified By: 任超
+ */
+<script>
+export default {
+  name: 'LbRender',
+  functional: true,
+  props: {
+    scope: Object,
+    render: Function
+  },
+  render: (h, ctx) => {
+    return ctx.props.render ? ctx.props.render(h, ctx.props.scope) : ''
+  }
+}
+</script>

+/*
+ * FileName: lb-table.vue
+ * Remark: element table
+ * Project: lb-element-table
+ * Author: 任超
+ * File Created: Tuesday, 19th March 2019 9:55:27 am
+ * Last Modified: Tuesday, 19th March 2019 9:55:34 am
+ * Modified By: 任超
+ */
+
+<template>
+  <div :class="['lb-table', customClass]">
+    <el-table ref="elTable" :row-class-name="tableRowClassName" :border="border" :show-header='showHeader'
+      :header-cell-style="{ background: '#F8FAFA' }" v-bind="$attrs" :height="tableHeight" v-on="$listeners"
+      :data="data" style="width: 100%" :span-method="this.merge ? this.mergeMethod : this.spanMethod">
+      <lb-column v-bind="$attrs" v-for="(item, index) in column" :key="index" :column="item">
+      </lb-column>
+    </el-table>
+    <el-pagination class="lb-table-pagination" v-if="pagination" v-bind="$attrs" v-on="$listeners" background
+      :page-sizes="[10, 15, 20, 50]" layout="total, sizes, prev, pager, next" @current-change="paginationCurrentChange"
+      :style="{ 'margin-top': paginationTop, 'text-align': paginationAlign }">
+    </el-pagination>
+  </div>
+</template>
+
+<script>
+import LbColumn from './lb-column'
+export default {
+  props: {
+    column: Array,
+    data: Array,
+    spanMethod: Function,
+    pagination: {
+      type: Boolean,
+      default: true,
+    },
+    border: {
+      type: Boolean,
+      default: false,
+    },
+    showHeader: {
+      type: Boolean,
+      default: true,
+    },
+    paginationTop: {
+      type: String,
+      default: '0',
+    },
+    heightNum: {
+      type: Number,
+      default: 255,
+    },
+    heightNumSetting: {
+      type: Boolean,
+      default: false,
+    },
+    customClass: {
+      type: String,
+      default: '',
+    },
+    paginationAlign: {
+      type: String,
+      default: 'right',
+    },
+    merge: Array,
+  },
+  components: {
+    LbColumn,
+  },
+  data () {
+    return {
+      tableHeight: '100%',
+      mergeLine: {},
+      mergeIndex: {},
+    }
+  },
+  created () {
+    this.getMergeArr(this.data, this.merge)
+    this.getHeight()
+
+  },
+  mounted () {
+  },
+  computed: {
+    dataLength () {
+      return [] || this.data.length
+    },
+  },
+  methods: {
+    tableRowClassName ({ row, rowIndex }) {
+      if (rowIndex % 2 === 1) {
+        return 'interlaced';
+      }
+    },
+    getHeight () {
+      if (this.heightNumSetting) {
+        this.tableHeight = this.heightNum + 'px'
+      } else {
+        this.tableHeight = window.innerHeight - this.heightNum + 'px'
+      }
+    },
+    changeHeight (heightNum) {
+      this.tableHeight = heightNum + 'px'
+    },
+    clearSelection () {
+      this.$refs.elTable.clearSelection()
+    },
+    toggleRowSelection (row, selected) {
+      this.$refs.elTable.toggleRowSelection(row, selected)
+    },
+    toggleAllSelection () {
+      this.$refs.elTable.toggleAllSelection()
+    },
+    toggleRowExpansion (row, expanded) {
+      this.$refs.elTable.toggleRowExpansion(row, expanded)
+    },
+    setCurrentRow (row) {
+      this.$refs.elTable.setCurrentRow(row)
+    },
+    clearSort () {
+      this.$refs.elTable.clearSort()
+    },
+    clearFilter (columnKey) {
+      this.$refs.elTable.clearFilter(columnKey)
+    },
+    doLayout () {
+      this.$refs.elTable.doLayout()
+    },
+    sort (prop, order) {
+      this.$refs.elTable.sort(prop, order)
+    },
+    paginationCurrentChange (val) {
+      this.$emit('p-current-change', val)
+    },
+    getMergeArr (tableData, merge) {
+      if (!merge) return
+      this.mergeLine = {}
+      this.mergeIndex = {}
+      merge.forEach((item, k) => {
+        tableData.forEach((data, i) => {
+          if (i === 0) {
+            this.mergeIndex[item] = this.mergeIndex[item] || []
+            this.mergeIndex[item].push(1)
+            this.mergeLine[item] = 0
+          } else {
+            if (data[item] === tableData[i - 1][item]) {
+              this.mergeIndex[item][this.mergeLine[item]] += 1
+              this.mergeIndex[item].push(0)
+            } else {
+              this.mergeIndex[item].push(1)
+              this.mergeLine[item] = i
+            }
+          }
+        })
+      })
+    },
+    mergeMethod ({ row, column, rowIndex, columnIndex }) {
+      const index = this.merge.indexOf(column.property)
+      if (index > -1) {
+        const _row = this.mergeIndex[this.merge[index]][rowIndex]
+        const _col = _row > 0 ? 1 : 0
+        return {
+          rowspan: _row,
+          colspan: _col,
+        }
+      }
+    },
+  },
+  watch: {
+    merge () {
+      this.getMergeArr(this.data, this.merge)
+    },
+    dataLength () {
+      this.getMergeArr(this.data, this.merge)
+    }
+  },
+}
+</script>
+<style  rel="stylesheet/scss" lang="scss" >
+.lb-table {
+  .interlaced {
+    background: #FCFDFD;
+    ;
+    border: 1px solid #ECECEE;
+  }
+
+  .el-table {
+    border: 1px solid #ECECEE;
+    border-radius: 4px 4px 0 0;
+  }
+
+  .el-table::before {
+    display: none;
+  }
+
+  .el-table--enable-row-hover .el-table__body tr:hover>td {
+    background: #FBFCFD !important;
+  }
+}
+
+.el-table th>.cell {
+  padding-left: 20px;
+}
+
+.el-table .cell {
+  padding-left: 20px;
+}
+</style>

+## 这是对于element-table 进行的二次封装 
+
+### 文档地址
+
+<!-- table 已经全局注册不需要每个页面单独注册 -->
+
+[Windows/Mac/Linux 全平台客户端](https://github.liubing.me/lb-element-table/zh/guide/)

@@ -101,7 +101,6 @@ export default {
       const { name } = this.$route
       if (name) {
         this.$store.dispatch('tagsView/addView', this.$route)
-        console.log(this.visitedViews, name);
       }
       return false
     },

@@ -6,6 +6,7 @@ import 'normalize.css/normalize.css' // a modern alternative to CSS resets
 import Element from 'element-ui'
 import './styles/element-variables.scss'
 import '@/styles/index.scss' // global css
+import lbTable from './components/lb-table/index';
 
 import './image/icons' // icon
 import store from './store'
@@ -13,9 +14,8 @@ import router from './router'
 import _ from 'lodash'
 
 import * as filters from './filters' // global filters
-Vue.use(Element, {
-    size: 'small'
-})
+Vue.use(Element, { size: 'small' })
+Vue.use(lbTable);
 Object.keys(filters).forEach(key => {
     Vue.filter(key, filters[key])
 })

+// table 内部过滤器 由于过滤器只能在模板中使用 所以 就有了 jsx内部方法过滤器
+export default class filter {
+  // 业务来源
+  busSource(val) {
+    let status = { 1: '办事大厅', 2: '微信小程序',default: '暂无' }
+    return status[val]
+  }
+}

+export default {
+  methods: {
+    handleSelectionChange (val) {
+      console.log(val);
+    },
+    handleSizeChange (val) {
+      console.log(val);
+    },
+    handleCurrentChange (val) {
+      console.log(val);
+    },
+  }
+}

 <template>
-  <keep-alive include="dbx">
-    <div class="from-clues">
-      <!-- 表单部分 -->
-      <div class="from-clues-header">
-        <el-form :model="queryForm" ref="queryForm" label-width="70px">
-          <el-row>
-            <el-col :span="5">
-              <el-form-item label="业务来源">
-                <el-select
-                  v-model="queryForm.ywly"
-                  filterable
-                  clearable
-                  placeholder="请选择业务来源"
-                >
-                  <el-option
-                    v-for="item in ywlys"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="权利类型">
-                <el-select
-                  v-model="queryForm.qllx"
-                  filterable
-                  clearable
-                  placeholder="请选择权利类型"
-                >
-                  <el-option
-                    v-for="item in qllxs"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="登记类型">
-                <el-select
-                  v-model="queryForm.djlx"
-                  filterable
-                  clearable
-                  placeholder="请选择登记类型"
-                >
-                  <el-option
-                    v-for="item in djlxs"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value"
-                  >
-                  </el-option>
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="5">
-              <el-form-item label="业务号">
-                <el-input
-                  placeholder="请输入业务号"
-                  v-model="queryForm.ywh"
-                  clearable
-                  class="width200px"
-                >
-                </el-input>
-              </el-form-item>
-            </el-col>
+  <div class="from-clues">
+    <!-- 表单部分 -->
+    <div class="from-clues-header">
+      <el-form :model="queryForm" ref="queryForm" label-width="70px">
+        <el-row>
+          <el-col :span="5">
+            <el-form-item label="业务来源">
+              <el-select v-model="queryForm.ywly" filterable clearable placeholder="请选择业务来源">
+                <el-option v-for="item in ywlys" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="权利类型">
+              <el-select v-model="queryForm.qllx" filterable clearable placeholder="请选择权利类型">
+                <el-option v-for="item in qllxs" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="登记类型">
+              <el-select v-model="queryForm.djlx" filterable clearable placeholder="请选择登记类型">
+                <el-option v-for="item in djlxs" :key="item.value" :label="item.label" :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="5">
+            <el-form-item label="业务号">
+              <el-input placeholder="请输入业务号" v-model="queryForm.ywh" clearable class="width200px">
+              </el-input>
+            </el-form-item>
+          </el-col>
 
-            <el-col :span="4" class="btnCol">
-              <el-form-item>
-                <el-button type="primary" @click="queryClick()">查询</el-button>
-                <el-button @click="moreScreeningClick()">更多选项</el-button>
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
-      </div>
-      <!-- 表格 -->
+          <el-col :span="4" class="btnCol">
+            <el-form-item>
+              <el-button type="primary" @click="queryClick()">查询</el-button>
+              <el-button @click="moreScreeningClick()">更多选项</el-button>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
     </div>
-  </keep-alive>
+    <!-- 表格 -->
+    <div>
+      <lb-table :page-size="pageData.size" @sort-change="handleSort" :current-page.sync="pageData.current"
+        :total="pageData.total" @selection-change="handleSelectionChange" @size-change="handleSizeChange"
+        @p-current-change="handleCurrentChange" :column="tableData.columns" :data="tableData.data">
+      </lb-table>
+    </div>
+  </div>
 </template>
 <script>
+import table from '@/utils/mixin/table'
+import { datas, sendThis } from "./dbxdata"
 export default {
   name: "dbx",
   components: {},
-  mounted() {},
-  data() {
+  mixins: [table],
+  mounted () {
+    sendThis(this);
+  },
+  data () {
     return {
       queryForm: {
         ywly: "",
@@ -97,15 +71,38 @@ export default {
         djlx: "",
         ywh: "",
       },
+      pageData: {
+        current: 1,
+        size: 10,
+        total: 2
+      },
+      tableData: {
+        columns: datas.columns(),
+        data: [
+          {
+            slsj: '2022-5-12'
+          },
+          {
+            slsj: '2022-5-13'
+          }
+        ]
+      }
+    }
+  },
+  methods: {
+    // 初始化数据
+    fetchData () {
 
-      commentData: {},
-    };
+    },
+    handleSort (name, sort) {
+      console.log(name, sort);
+    },
+    openDialog () {
+      console.log(999999999999999);
+    }
   },
-  created() {},
-  methods: {},
-};
+}
 </script>
-
 <style scoped lang="scss">
 @import "~@/styles/public.scss";
 </style>

+import filter from '@/utils/filter.js'
+let vm = null
+
+const sendThis = (_this) => {
+  vm = _this
+}
+class data extends filter {
+  constructor() {
+    super()
+  }
+  columns () {
+    return [
+      {
+        label: '序号',
+        type: 'index',
+        width: '50'
+      },
+      {
+        prop: "ywly",
+        label: "业务来源",
+      },
+      {
+        prop: "lczt",
+        label: "流程状态",
+      },
+      {
+        prop: "zbhj",
+        label: "在办环节",
+      },
+      {
+        prop: "ywh",
+        label: "业务号",
+      },
+      {
+        prop: "sqywmc",
+        label: "申请业务名称",
+      },
+      {
+        prop: "qlr",
+        label: "权利人",
+      },
+      {
+        prop: "ywr",
+        label: "义务人",
+      },
+      {
+        prop: "zl",
+        label: "坐落",
+      },
+      {
+        prop: "slsj",
+        label: "受理时间",
+        sortable: 'custom'
+      },
+      {
+        prop: "slry",
+        label: "受理人员",
+      },
+      {
+        prop: "zrsj",
+        label: "转入时间",
+        sortable: 'custom'
+      },
+      {
+        label: '操作',
+        width: '80',
+        align: 'center',
+        fixed: 'right',
+        render: (h, scope) => {
+          return <el-button type="text" icon="el-icon-delete" onClick={() => { vm.openDialog(scope) }}>编辑</el-button>
+        }
+      }
+    ]
+  }
+}
+let datas = new data()
+export {
+  datas,
+  sendThis
+}