取名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 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent