smart-vue-table

基于vue2.js的智能表格组件

Getting Start

npm i --save smart-vue-table

// 入口文件
import smartTable from 'smart-vue-table';

Vue.use(smartTable);

效果图

使用示例

<smartTable v-bind:table-param="tableParam" v-on:receiveData="receiveData" ref="changeItem">
    <tr slot="thead">
      <th>标题</th>
      <th>类别</th>
      <th>操作</th>
    </tr>
    <tr slot="tbody" v-for="item in tableData">
      <td>{{item.title}}</td>
      <td>{{item.classic}}</td>
      <td>
        <button class="btn btn-info btn-xs" @click = "toArticle(item.id,1)">预览</button>
        <button class="btn btn-danger btn-xs" @click = "deleteArticle(item.id,item.title)">删除</button>
      </td>
    </tr>
</smartTable>

javascript

<script>
export default {
  data () {
    return {
      tableParma: {
        'method': 'GET',
        'type': 'async',
        'url': './static/json.json',
        'query': {}
      },
      tableData: []
    }
  },
  methods: {
    receiveData (data) {
      this.tableData = data
    },
    search () {
      let paramsObj = {}
      if (this.title) {
        paramsObj.title = this.title
      }
      if (this.status) {
        paramsObj.show = this.show
      }
      this.$refs.changeItem.fetchData(paramsObj)
    }
  }
}
</script>

| 名称 | 类型 | 默认值 | 描述 | | ------------ | :-----: | :---------: | ---------------------------------------- | | method       | String |     GET       | http请求方式（GET/POST） | | type     | String |     sync     | 数据请求方式（同步/异步）| | url | string |   ''     | 请求链接             | | query | object |   {}    | 添加参数           | | errCb | function |   null    | 异常回调函数         |

异步状态时，分页参数及查找参数字段

| 名称     | 类型 | 默认值 | 描述                         | | ------------ | :-----: | :---------: | ---------------------------------------- | | pageNum       | Numberg |     10       | 每页展示 共pageNum条 数据 | | page     | Number |     1    | 展示第page页数据| | searchKey | String |   ''     | 全局搜索字段               |

后端数据返回格式

| 名称 | 类型 | 默认值 | 描述 | | ------------ | :-----: | :---------: | ---------------------------------------- | | status      | number |             | 返回状态值 | | msg     | String |         | 返回信息| | data | object |         | 返回具体数据对象             | | count | number |     | 返回所有总数         | | list | array |     | 返回具体数据         |

// 接口结果示例
{
   "status":1,
   "msg":"查询成功",
   "data":{
     "count":3, 
     "list":[
	{
	  "id": 1,
	  "title": "ceshititle"
	},
	{ 
	  "id": 2,
	   "title": "ceshititle"
	 }
     ]
  }
}

License

This code is distributed under the MIT License.