Skip to content

FantasyGao/vue-smartTable

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

vue-smartTable

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

Getting Start

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

Vue.use(smartTable);

效果图

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.

About

便捷的vue2表格组件,支持多种配置

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published