参数
参数 | 说明 | 类型 | 默认值 |
---|
tableId | 表格id | String | |
loading | 加载框 | Boolean | false |
tableColumnTitles | 表头 | Array | |
tableDataProp | 表格数据 | Array | [] |
arraySpanMethod | 单元格合并方法 | Function | () => {} |
showSummary | 合计 | Boolean | false |
getSummaries | 合计方法 | Function | 默认计算一列的和 |
resizable | 表格是否可以拖动 | Boolean | false |
showHeader | 是否显示表头 | Boolean | true |
placeholderText | 提示语 | String | 请输入 |
tableHeaderCellHeight | 表头单元格高度 | String | 32px |
tableHeaderCellTextAlign | 表头文本对齐方式 | String | left |
tableCellHeight | 单元格高度 | String | 32px |
tableCellTextAlign | 文本对齐方式 | String | left |
tableHeight | 表格高度 | String | 100% |
columnColorArr | 列的颜色 | Function | [] |
cellStyle | 单元格方法 | Function | () => {} |
enableEdit | 能否编辑 | Boolean | true |
| | | |
方法
方法 | 说明 | 回调参数 |
---|
inputChange | input的change事件(在 Input 值改变时触发) | (val, scope.$index, scope.row, scope.column) |
tableDataProp 示例
tableDataProp: [
{
id: "1",
name: "张三",
age: 20,
weight: '120'
},
{
id: "2",
name: "李四",
age: 30,
weight: '150'
},
],
tableColumnTitles 示例(多表头组件)
[
{
label: "编号",
prop: "id",
width: "100px",
// minWidth: 1,
inputInfo: { inputCategory: "text" }, // input(默认), inputNumber, text, select, 四种值
},
{ label: "姓名", prop: "name" },
{
label: "爱好",
prop: "hobby",
children: [
{ label: "游泳", prop: "swimming" },
{
label: "国家",
prop: "country",
options: [
{
optionLabel: "美国",
optionValue: "American",
},
{
optionLabel: "中国",
optionValue: "China",
},
{
optionLabel: "法国",
optionValue: "France",
},
],
inputInfo: { inputCategory: "select" },
},
{
label: "音乐",
prop: "music",
children: [
{
label: "左手",
prop: "knight",
children: [
{
label: "占比",
prop: "zb",
inputInfo: { inputCategory: "inputNumber", maxlength: 9 },
},
{
label: "小菜",
prop: "xc",
},
],
},
{ label: "右手", prop: "classical" },
],
},
],
},
]