github地址：https://github.com/501351981/vue_yii_cms
后台用的最多的组件莫过于表格了，我希望的表格组件要有这些功能
表头固定
包含分页功能
数据请求显示loading
支持单选，多选
使用简单
支持根据url自动请求数据，或者直接给表格传一个数组
能够对ajax请求的数据进行处理
先看使用的范例
<template>
<div>
<table-box ref="tableBox" :url="table.url" :columns="table.columns" :key-name="table.keyName" :parse-data="table.parseData" :data="table.data" :multi-select="table.multiSelect">
<tr slot="row" slot-scope="props">
<td class="tc">{{props.index}}</td>
<td class="tc"><i :class="props.item.icon"></i></td>
<td>{{props.item.name}}</td>
<td class="tc">{{props.item.sort}}</td>
<td>
<button-box class="btn-info btn-sm" :to="'/menu/children?pid='+props.item.id+'&ptitle='+props.item.name">设置子菜单</button-box>
<button-box class="btn-warning btn-sm" :to="'/menu/rights?pid='+props.item.id+'&ptitle='+props.item.name">设置子权限</button-box>
</td>
</tr>
</table-box>
</div>
</template>
<script>
import api from '../../utils/config/api'
import TableBox from '../../components/mod/TableBox'
import ButtonBox from '../../components/mod/ButtonBox'
export default {
name: 'MenuIndex',
components: {TableBox,ButtonBox},
data:function () {
return {
table:{
url:api.menu_index,
multiSelect:false,
keyName:'id',
columns:[
{
title:"图标",
field:"icon",
width:'80'
},
{
title:"名称",
field:"name",
width:''
},
{
title:"排序值",
field:"sort",
width:'100'
},
{
title:"操作",
field:"caozuo",
width:'200'
},
],
parseData:function (data) {
data.forEach(function(row){
//对获取的数据做处理
})
}
},
}
</script>
<style lang="less" scoped>
</style>在data中，初始化table的url、单选还是多选、keyname（选中行的时候，返回keyname）、表头信息，表头放在这里是因为我们表格组件要实现表头固定，实际是使用了两个表格，也就是有两个表头，如果通过slot的方式传入表头，就需要2个重复的表头，所以不理想。
表格组件完整代码
{:}序号 in .{{.}}序号 in .{{.}}(,) in (){{()}} in {{[.]}}
纪录总数:{{}}，共{{}}页，每页显示:510203050100条记录
{:==1}>1&&(1)首页{:==1}>1&&(-1)上一页 in {:==}!=&&(){{}}{:==}<&&(+1)下一页{:==}<&&()尾页 network {
: :{
: : :{
: : } :{
: : } : : :{
: : }
} :{
:(newdata) {
.(.)
}
} :() {
{
:[] : :{} : : : :[] :[] :. :. : }
} :{
} :() {
.(.)
} :{
:(index) {
(.-)*.+index+ } :() {
.$refs.tableHead.scrollLeft=.$refs.tableBody.scrollLeft
} :() {
.=.(./.)
= (.-)<?:(.-)
= (.+)>.?.:(.+)
.=[]
(=<=++){
..()
}
} :(page){
(.){
.= network.(.{
:page :. .... }).(res=>{
.=page
.=res. .=res. (.){
.(.)
}
.()
.()
.= }).(()=>{
.= })
}(.){
.=page
.=..length
.=[]
(=<.++){
=(.-)*.+ (<=..length-){
..(.[])
}
}
(.){
.(.)
}
.()
.()
}{
.()
}
} :(){
= .=[]
(()=>{
(.$refs.tableBody.offsetHeight<.$refs.tableBody.scrollHeight){
.= }
=.$refs.tableBody.()[].()
(=<.++){
[].= [].=(e) {
(.){
(.==){
.= = ..() (> -) {
..() }
}{
.= ..()
}
}{
(.==){
}{
(=<.++){
[].= }
.= .[]= }
}
}
}
})
} :() {
=[]
(=<..length++){
=.[.[]]
.([.])
}
} :() {
=[]
(=<..length++){
=.[.[]]
.()
}
} :(params={}) {
.=params
.(.)
} :(params={}){
.=params
.= .(.)
} :() {
.= .()
}
}
}
{
{
: () }
{
: () }
}
.{
: % : : : : : .{
.{
: }
.{
::{
: : }
::{
: : }
::{
: : }
}
}
{
: : : : : }
.{
: : {
: {
: : : : : .{
: : : - : : : % : }
:{
: }
:{
: }
}
}
}
.{
: : : : : % : % : () : : : .{
: : : : : : : % : }
}
.{
: : : : : : : ::{
: : }
::{
: : }
::{
: }
::{
: : }
..{
: : : : : : : : }
{
{
.{
: }
}
{
: : : :{
: }
:{
: }
.{
: : }
}
.{
: : }
}
}
}
.{
: % : : : : .{
.{
: : : }
{
: : }
}
.{
{
{
: : : : : : : : .{
: : : }
.{
: : }
}
}
}
}