Vusjs + Element UI + el-search-table-pagination插件的测试代码

Vusjs + Element UI + el-search-table-pagination插件的测试代码

utils.js

export default {
  install: function (Vue, options) {
    // Vue.prototype('sayHello', function () {
    //   console.log('asdfadf')
    // })

    // 注册一个属性资源
    Vue.prototype.NOTICE = {
      user_id: '2',
      dat_time: function () {
        return 's'
      }
    }
    Vue.mixin({
      // created: function () {
      //   if (this.NOTICE) {
      //     console.log('组件开始加载')
      //   }
      // },
      methods: {
        test: function () {
          console.log('mixin 测试 方法'+ this.NOTICE.dat_time()+this.NOTICE.user_id)
        }
      }
    })
    //  添加实例方法
    Vue.prototype.$service = {
      sayHi: function (name) {
        console.log('Hello ' + name)
      }
    }

  }
}

main.js

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue'
import Utils from './utils/utils'
import ElSearchTablePagination from 'el-search-table-pagination'

import axios from 'axios'
Vue.use(ElSearchTablePagination, {
  axios
})
Vue.use(Utils)
Vue.use(ElementUI)

new Vue({
  el: '#app',
  render: h => h(App)
})

app.vue

<template>
  <el-main class="container">
    <template>
      <el-search-table-pagination
        type="local"
        :data="tableData"
        :columns="columns"
        :form-options="formOptions">
      </el-search-table-pagination>
    </template>
  </el-main>


</template>

<script>
  export default {
    data() {
      return {
        formOptions: {
          inline: true,
          // size: 'mini',
          submitBtnText: '搜索',
          forms:[
            {prop: 'name',label: '姓名'},
            {prop: 'address',label: '地址'}
          ]
        },
        columns:[
          {prop: 'name',label: '姓名'},
          {prop: 'address',label: '地址'},
          {prop: 'date',label: '日期',render:row=>`${row.date} hh`},
        ],
        tableData: [],
        h: this.test()
      }
    },
    methods: {
      initData:function () {
        this.tableData = [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }]
      }
    },
    mounted:function () {
      this.initData()
    }
  }
</script>