# Table表格
# 普通用法
共 100 条
- 10条/页
- 15条/页
- 20条/页
- 30条/页
- 50条/页
无数据
- 1
- 2
- 3
- 4
- 5
- 6
- 10
<z-el-table :data="data"
:option="option"
@switchChange="switchChange"
@editInputBlur="editInputBlur"
@rowClick="rowClick"
@handleSizeChange="handleSizeChange"
@handleCurrentChange="handleCurrentChange"></z-el-table>
<script>
export default {
data() {
return {
option: {
// table配置选项
table: {
rowKey: "id",
defaultExpandAll: true,
indent: 50,
border: true,
size: "",
}, // 列配置选项，将选择框操作提出来了，其他依然保留各自列
column: {
// 选择框
selection: true,
// 选择框根据条件是否可选
selectable: (row, index) => {
if (row.switchs) {
return true;
}
},
//column列,columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
//prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
columnList: [{
type: "text",
prop: "date",
label: "默认样式",
width: "",
align: "center",
}, {
type: "text",
prop: "id",
label: "可以排序",
width: "",
align: "center",
sortable: true, //开启排序
},
{
type: "object",
prop: "objmsg",
label: "object类型",
objKey: "msg",
width: "",
align: "center",
sortable: false,
},
{
type: "ownDefined",
prop: "address",
label: "自定义返回内容",
width: "",
align: "center",
sortable: false,
ownDefinedReturn: (row, $index) => {
return row.address
}
},
{
type: "switch",
prop: "switchs",
label: "switch开关",
width: "",
align: "center",
activeText: "已启用",
inactiveText: "未启用",
activeValue: 1,
inactiveValue: 0,
sortable: false,
},
{
type: "image",
prop: "img",
label: "图片",
width: "180",
align: "center",
sortable: false,
},
{
type: "text",
editRow: null,
prop: "name",
label: "点击可编辑",
width: "",
align: "center",
sortable: false,
},
//如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
{
type: "operation",
label: "操作",
width: "180",
align: "center",
sortable: false,
operation: [{
type: "text",
label: "编辑",
icon: "",
color: 'red',
buttonClick: this.rowOperation,
isShow: (row, $index) => {
return true;
}
}, {
type: "text",
label: "删除",
icon: "",
color: 'blue',
buttonClick: this.rowOperation,
isShow: (row, $index) => {
return true;
}
}, {
type: "primary",
label: "查看",
icon: "",
color: '',
buttonClick: this.rowOperation,
isShow: (row, $index) => {
return true;
}
}]
},
],
},
page: { //分页对象
position: "left", //分页组件位置
total: 100,
pageData: {
currentPage: 1,
pageSize: 10
}
},
},
data: [{
id: '1',
date: '2016-05-02',
date: '2016-05-02',
name: '王小虎点击修改值',
address: '上海市普陀区金沙江路 1518 弄',
switchs: 1,
img: 'http://head.images.muchuantong.com/de4e7829-8695-46b2-8437-ddcbca7f0831.jpg',
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}, {
id: '2',
date: '2016-05-04',
name: '王小虎点击修改值',
address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄',
switchs: 1,
img: 'http://head.images.muchuantong.com/de4e7829-8695-46b2-8437-ddcbca7f0831.jpg',
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}, {
id: '3',
date: '2016-05-01',
name: '王小虎点击修改值',
address: '上海市普陀区金沙江路 1519 弄',
switchs: 0,
img: ['http://head.images.muchuantong.com/de4e7829-8695-46b2-8437-ddcbca7f0831.jpg'],
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}, {
id: '4',
date: '2016-05-03',
name: '王小虎点击修改值',
address: '上海市普陀区金沙江路 1516 弄',
switchs: 1,
img: [],
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}],
}
},
methods: {
rowOperation(row, $index) {
console.log(row, $index)
},
switchChange(row, $index, prop) {
console.log(row, $index, prop)
},
rowClick(row, column, event, optionColumn) {
// 点击行触发，编辑点击的所在列，排除selection选择框
if (column.type != 'selection' && this.option.column.columnList[column.index].editRow === null) {
this.option.column.columnList[column.index].editRow = row.rowIndex;
}
},
editInputBlur(row, $index, prop, columIndex) {
this.option.column.columnList[columIndex].editRow = null;
},
//页码变化
handleCurrentChange(e) {
this.pageObj.pageData.page = e;
},
//条数变化
handleSizeChange(e) {
this.pageObj.pageData.size = e;
this.pageObj.pageData.page = 1;
},
},
}
</script>
Expand Copy Copy
# 可控列
- 正常
- 中等
- 紧凑
共 100 条
- 10条/页
- 15条/页
- 20条/页
- 30条/页
- 50条/页
无数据
- 1
- 2
- 3
- 4
- 5
- 6
- 10
<z-el-table-size :option.sync="option"
:checkedColumnList="checkedColumnList" />
<z-el-table :data="data"
:option="option"></z-el-table>
<script>
export default {
data() {
return {
checkedColumnList:[],
option: {
// table配置选项
table: {
rowKey: "id",
defaultExpandAll: true,
indent: 50,
border: true,
size: "",
}, // 列配置选项，将选择框操作提出来了，其他依然保留各自列
column: {
// 选择框
selection: true,
// 选择框根据条件是否可选
selectable: (row, index) => {
if (row.switchs) {
return true;
}
},
//column列,columType(列类型,可选text(默认为普通文字模式),input(input可编辑框),switch(switch开关),image(图片),operation(操作按钮))
//prop(参数),label(列名),width(宽度),align(对齐方式),sortable(是否支持排序)
columnList: [{
type: "text",
prop: "date",
label: "默认样式",
width: "",
align: "center",
}, {
type: "text",
prop: "id",
label: "可以排序",
width: "",
align: "center",
sortable: true, //开启排序
},
{
type: "object",
prop: "objmsg",
label: "object类型",
objKey: "msg",
width: "",
align: "center",
sortable: false,
},
{
type: "ownDefined",
prop: "address",
label: "自定义返回内容",
width: "",
align: "center",
sortable: false,
ownDefinedReturn: (row, $index) => {
return row.address
}
},
{
type: "switch",
prop: "switchs",
label: "switch开关",
width: "",
align: "center",
activeText: "已启用",
inactiveText: "未启用",
activeValue: 1,
inactiveValue: 0,
sortable: false,
},
{
type: "image",
prop: "img",
label: "图片",
width: "180",
align: "center",
sortable: false,
},
{
type: "text",
editRow: null,
prop: "name",
label: "点击可编辑",
width: "",
align: "center",
sortable: false,
},
//如果为操作列,则需要填写需要的操作按钮,类型为Object。operation(操作类型,可选edit,delete,see),type(按钮样式,参考el—botton类型),label(按钮文字)icon(参考el-icon),color(字体颜色)
{
type: "operation",
label: "操作",
width: "180",
align: "center",
sortable: false,
operation: [{
type: "text",
label: "编辑",
icon: "",
color: 'red',
buttonClick: this.rowOperation,
isShow: (row, $index) => {
return true;
}
}, {
type: "text",
label: "删除",
icon: "",
color: 'blue',
buttonClick: this.rowOperation,
isShow: (row, $index) => {
return true;
}
}, {
type: "primary",
label: "查看",
icon: "",
color: '',
buttonClick: this.rowOperation,
isShow: (row, $index) => {
return true;
}
}]
},
],
},
page: { //分页对象
position: "left", //分页组件位置
total: 100,
pageData: {
currentPage: 1,
pageSize: 10
}
},
},
data: [{
id: '1',
date: '2016-05-02',
date: '2016-05-02',
name: '王小虎点击修改值',
address: '上海市普陀区金沙江路 1518 弄',
switchs: 1,
img: 'http://head.images.muchuantong.com/de4e7829-8695-46b2-8437-ddcbca7f0831.jpg',
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}, {
id: '2',
date: '2016-05-04',
name: '王小虎点击修改值',
address: '上海市普陀区金沙江路 1517 弄上海市普陀区金沙江路 1517 弄',
switchs: 1,
img: 'http://head.images.muchuantong.com/de4e7829-8695-46b2-8437-ddcbca7f0831.jpg',
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}, {
id: '3',
date: '2016-05-01',
name: '王小虎点击修改值',
address: '上海市普陀区金沙江路 1519 弄',
switchs: 0,
img: ['http://head.images.muchuantong.com/de4e7829-8695-46b2-8437-ddcbca7f0831.jpg'],
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}, {
id: '4',
date: '2016-05-03',
name: '王小虎点击修改值',
address: '上海市普陀区金沙江路 1516 弄',
switchs: 1,
img: [],
objmsg: {
msg: '啊啊啊啊啊啊啊啊'
}
}],
}
},
methods: {
// 表格设置回调
tableRefresh() {
alert("刷新回调")
},
},
}
</script>
Expand Copy Copy
# option参数
| 参数名称 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| table | table对象配置项 | Object | 是 | — | — |
| column | 列配置项 | Object | 是 | — | — |
| page | 分页配置项 | Object | 是 | — | — |
# table参数
| 参数名称 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 参考eltable原生属性 | — | — | — | — | — |
# column参数
| 参数名称 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| showIndex | 是否显示序号 | Boolean | 否 | — | false |
| selection | 是否显示表格选择框 | Boolean | 否 | — | false |
| selectable | 用于控制列表选择框是否禁用 | Function({row, rowIndex}) | 否 | — | — |
| columnList | 表格列的列表 | Array | 是 | — | — |
# columnArr参数
| 参数名称 | 说明 | 类型 | 是否必填 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| type | 当前列的类型 | String | 是 | text/select/object/ownDefined/image/tagDict/operation/slot | — |
| prop | 当前列字段名 | String | 是 | — | — |
| label | 当前列字段名（中文） | String | 是 | — | — |
| dict | 字典（仅在类型为text时或者tagDict时可用） | Array | 否 | — | — |
| props | 字典项字段用于解析字典或者对象需传入lable和value | Object | 否 | — | — |
| editRow | 是否为可编辑列 | Number | 否 | row下标 | null |
| ownDefinedReturn | 自定义返回类容（仅在类型为ownDefined时生效） | Function({row, rowIndex}) | 否 | — | — |