取名nobadtable,源于它看起来不是特别的糟糕
这里默认大家都非常熟悉vue和uniapp的包引入,不再阐述uniapp组件引入方法以及uniapp组件和vue的区别
已测试平台 ->ios,android,wap,微信小程序
< v-table :columns ="columns " :list ="data "> </ v-table >
javascript (data数组必须提供id)
import vTable from "@/components/table.vue"
export default {
components : {
vTable
} ,
data ( ) {
return {
data : [ {
name : 'John Brown' ,
age : 18 ,
address : 'New York No. 1 Lake Park' ,
id : "1" ,
}
] ,
columns : [ {
title : "ID" ,
key : "id"
} ,
{
title : 'Name' ,
key : 'name'
} ,
{
title : 'Age' ,
key : 'age'
} ,
{
title : 'Address' ,
key : 'address'
}
] ,
}
}
}
属性
说明
类型
默认
必填
columns
列数据
Array
--
必填
dataColSpan
行数据
Array
--
必填
row-class-name
行样式
String或Function
--
--
height
表格高度(可用固定表头)
Number
--
--
td-height
单元格高
Number
110
--
cel-center
单元格水平居中
Boolean
true
--
td-width
单元格宽
Number
30
--
td-padding
单元格间距
Number
10
--
border-color
表格边框颜色
String
#666
--
th-td-height
表头单元格高
Number
30
--
loading
加载状态
Boolean
false
--
selection
可选mulit和single
String
--
--
fixed-checkbox
固定多选列 和selection="mulit"共存
Boolean
false
--
span-method
行列合并
Function
--
--
slot-cols
插槽自定义列元素,对应columns的key
Array
--
--
emptyText
插没数据提示文字
String
--
--
emptyClickFn
没数据点击响应函数
Function
--
--
属性
说明
参数
@on-selection-change
单选 多选变更
{old:"",new:""}
@delete
自定义事件(它可以不叫delete,可以是任意事件,只要你在list里面定义了)
{row:{},index:Number}
属性
说明
类型
cellClassName
设置行内某一列的样式类名
Object
operate
数据操作的列
Object
属性
说明
类型
$width
设置列宽度 例如 "120px",请务必使用px单位
String
$fixed
固定某一列,可选left和right
String
$operateList
数据操作选项和list的operate对应
Array