# Table 表格
# 标准表格
进入页面就请求表格内容，设置 questNow
<template>
<div>
<div>
<med-s-table rowKey="key" questNow :columns="columns" :dataSource="loadData"></med-s-table>
</div>
</div>
</template>
<script>
const columns = [
{ title: '标题', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Tags', dataIndex: 'tags',key: 'tags' },
]
const loadData = (parameter) => {
return Promise.resolve({
current: 1,
size: 10,
total: 50,
records: list,
})
}
// 此为使用接口时的请求方法
const loadData2 = (parameter) => {
var requestParameters = Object.assign({}, parameter)
return (
getMethods(requestParameters).then(function(res) {
return res.result
})
)
}
const list = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Browns',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr1.',
age: 25,
address: 'London No. 3 Lake Park',
children: [
{
key: 13111,
name: 'Jim Green jr11111111.',
age: 251,
address: 'London No. 3 Lake Park',
},
],
},
{
key: 1312,
name: 'Jimmy Green sr2.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
]
export default {
data() {
return {
columns,
loadData: loadData, // 实际请用上方 loadData2 代替此处函数
}
},
}
</script>
显示代码
# 初始不请求的表格
进入页面不默认请求表格内容，去除 questNow
<template>
<div>
<med-s-table rowKey="key" :columns="columns" :dataSource="loadData"></med-s-table>
</div>
</template>
<script>
const columns = [
{ title: '标题', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Tags', key: 'tags', dataIndex: 'tags' },
{ title: 'Action', key: 'action' },
]
const loadData = (parameter) => {
return Promise.resolve({
current: 1,
size: 10,
total: 50,
records: list,
})
}
// 此为使用接口时的请求方法
const loadData2 = (parameter) => {
var requestParameters = Object.assign({}, parameter)
return (
getMethods(requestParameters).then(function(res) {
return res.result
})
)
}
const list = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Browns',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr1.',
age: 25,
address: 'London No. 3 Lake Park',
children: [
{
key: 13111,
name: 'Jim Green jr11111111.',
age: 251,
address: 'London No. 3 Lake Park',
},
],
},
{
key: 1312,
name: 'Jimmy Green sr2.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
]
export default {
data() {
return {
columns,
loadData: loadData, // 实际请用上方 loadData2 代替此处函数
}
},
}
</script>
显示代码
# 带复选框的表格
<template>
<div>
<div>
<med-s-table
questNow
rowKey="key"
:columns="columns"
:dataSource="loadData"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange
}"
></med-s-table>
</div>
</div>
</template>
<script>
const columns = [
{ title: '标题', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Tags', key: 'tags', dataIndex: 'tags' },
{ title: 'Action', key: 'action' },
]
const loadData = (parameter) => {
return Promise.resolve({
current: 1,
size: 10,
total: 50,
records: list,
})
}
// 此为使用接口时的请求方法
const loadData2 = (parameter) => {
var requestParameters = Object.assign({}, parameter)
return (
getMethods(requestParameters).then(function(res) {
return res.result
})
)
}
const list = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Browns',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr1.',
age: 25,
address: 'London No. 3 Lake Park',
children: [
{
key: 13111,
name: 'Jim Green jr11111111.',
age: 251,
address: 'London No. 3 Lake Park',
},
],
},
{
key: 1312,
name: 'Jimmy Green sr2.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
]
export default {
data() {
return {
selectedRowKeys: [],
columns,
loadData: loadData, // 实际请用上方 loadData2 代替此处函数
}
},
methods: {
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys)
this.selectedRowKeys = selectedRowKeys
},
},
}
</script>
显示代码
# 带默认批量操作
带默认批量操作，以及插槽替换等功能
<template>
<div>
<div>
<med-s-table
questNow
rowKey="key"
:columns="columns"
:dataSource="loadData"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange
}"
:alert="{
clear: true,
delete: true,
export: true,
save: true,
invalid: () => {}
}"
@expand="expand"
@batchOpt="batchOpt"
>
<template #msgItem>我可以展示信息！</template>
<template #alertItem><med-button>插槽按钮</med-button></template>
</med-s-table>
</div>
</div>
</template>
<script>
const columns = [
{ title: '标题', dataIndex: 'name', key: 'name' },
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Tags', key: 'tags', dataIndex: 'tags' },
{ title: 'Action', key: 'action' },
]
const loadData = (parameter) => {
return Promise.resolve({
current: 1,
size: 10,
total: 50,
records: list,
})
}
// 此为使用接口时的请求方法
const loadData2 = (parameter) => {
var requestParameters = Object.assign({}, parameter)
return (
getMethods(requestParameters).then(function(res) {
return res.result
})
)
}
const list = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Browns',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr1.',
age: 25,
address: 'London No. 3 Lake Park',
children: [
{
key: 13111,
name: 'Jim Green jr11111111.',
age: 251,
address: 'London No. 3 Lake Park',
},
],
},
{
key: 1312,
name: 'Jimmy Green sr2.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
]
export default {
data() {
return {
selectedRowKeys: [],
columns,
loadData: loadData, // 实际请用上方 loadData2 代替此处函数
}
},
methods: {
expand(bool) {
console.log('展开的状态：', bool)
},
batchOpt(type, val) {
console.log('批量操作的类型：', type)
console.log('批量操作选中的值：', val)
},
onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys)
this.selectedRowKeys = selectedRowKeys
},
},
}
</script>
显示代码
# 包含各类操作
设置 hideAble: true
<template>
<div>
<div>
<med-s-table rowKey="key" questNow :columns="columns" :dataSource="loadData"></med-s-table>
</div>
</div>
</template>
<script>
const columns = [
{ title: '标题', dataIndex: 'name', key: 'name', hideAble: true },
{ title: 'Age', dataIndex: 'age', key: 'age', hideAble: true },
{
title: 'Address',
dataIndex: 'address',
key: 'address',
filters: [
{
text: 'London',
value: 'London',
},
{
text: 'New York',
value: 'New York',
},
],
},
{
title: 'Tags',
key: 'tags',
dataIndex: 'tags',
sort: true, // 排序
},
{
title: 'Action',
key: 'action',
scopedSlots: {
filterDropdown: 'filterDropdown',
filterIcon: 'filterIcon',
}, // 带搜索筛选
},
]
const loadData = (parameter) => {
return Promise.resolve({
current: 1,
size: 10,
total: 50,
records: list,
})
}
// 此为使用接口时的请求方法
const loadData2 = (parameter) => {
var requestParameters = Object.assign({}, parameter)
return (
getMethods(requestParameters).then(function(res) {
return res.result
})
)
}
const list = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Browns',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr1.',
age: 25,
address: 'London No. 3 Lake Park',
children: [
{
key: 13111,
name: 'Jim Green jr11111111.',
age: 251,
address: 'London No. 3 Lake Park',
},
],
},
{
key: 1312,
name: 'Jimmy Green sr2.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
]
export default {
data() {
return {
columns,
loadData: loadData, // 实际请用上方 loadData2 代替此处函数
}
},
}
</script>
显示代码
# 插槽
进入页面就请求表格内容，设置 questNow
<template>
<div>
<div>
<med-s-table rowKey="key" questNow :columns="columns" :dataSource="loadData">
<template v-slot:customTitle><a-icon type="smile-o" /> 我是表头插槽</template>
<a slot="name" slot-scope="text">{{ text }} 我是内容插槽</a>
<template #action>
<div>
<med-button>操作一</med-button>
<a-dropdown>
<a-menu slot="overlay">
<a-menu-item key="1"> 操作二 </a-menu-item>
<a-menu-item key="2"> 操作三 </a-menu-item>
<a-menu-item key="3"> 操作四 </a-menu-item>
</a-menu>
<a-button style="margin-left: 8px"> Button <a-icon type="down" /> </a-button>
</a-dropdown>
</div>
</template>
</med-s-table>
</div>
</div>
</template>
<script>
const columns = [
{
dataIndex: 'name',
key: 'name',
Slots: { title: 'customTitle' },
scopedSlots: {
customRender: 'name', // 内容插槽
},
},
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Tags', key: 'tags', dataIndex: 'tags' },
{
title: 'Action',
key: 'action',
scopedSlots: {
customRender: 'action', // 内容插槽
},
},
]
const loadData = (parameter) => {
return Promise.resolve({
current: 1,
size: 10,
total: 50,
records: list,
})
}
// 此为使用接口时的请求方法
const loadData2 = (parameter) => {
var requestParameters = Object.assign({}, parameter)
return (
getMethods(requestParameters).then(function(res) {
return res.result
})
)
}
const list = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
children: [
{
key: 121,
name: 'Jimmy Browns',
age: 16,
address: 'New York No. 3 Lake Park',
},
],
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
children: [
{
key: 131,
name: 'Jim Green',
age: 42,
address: 'London No. 2 Lake Park',
children: [
{
key: 1311,
name: 'Jim Green jr1.',
age: 25,
address: 'London No. 3 Lake Park',
children: [
{
key: 13111,
name: 'Jim Green jr11111111.',
age: 251,
address: 'London No. 3 Lake Park',
},
],
},
{
key: 1312,
name: 'Jimmy Green sr2.',
age: 18,
address: 'London No. 4 Lake Park',
},
],
},
],
},
],
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
]
export default {
data() {
return {
columns,
loadData: loadData, // 实际请用上方 loadData2 代替此处函数
}
},
}
</script>
显示代码
# 滚动加载
进入页面就请求表格内容，设置 questNow
<template>
<div>
<div>
<med-s-table rowKey="key" questNow :columns="columns" :dataSource="loadData" infinte @infinteLoad="infinteLoad" :showPagination="false"></med-s-table>
</div>
</div>
</template>
<script>
const columns = [
{
dataIndex: 'name',
key: 'name',
Slots: { title: 'customTitle' },
scopedSlots: {
customRender: 'name', // 内容插槽
},
},
{ title: 'Age', dataIndex: 'age', key: 'age' },
{ title: 'Address', dataIndex: 'address', key: 'address' },
{ title: 'Tags', key: 'tags', dataIndex: 'tags' },
{
title: 'Action',
key: 'action',
scopedSlots: {
customRender: 'action', // 内容插槽
},
},
]
const loadData = (parameter) => {
return Promise.resolve({
current: 1,
size: 10,
total: 50,
records: list,
})
}
// 此为使用接口时的请求方法
const loadData2 = (parameter) => {
var requestParameters = Object.assign({}, parameter)
return (
getMethods(requestParameters).then(function(res) {
return res.result
})
)
}
const list = [
{
key: 1,
name: 'John Brown',
age: 32,
address: 'New York No. 1 Lake Park',
children: [
{
key: 12,
name: 'John Brown jr.',
age: 30,
address: 'New York No. 3 Lake Park',
},
{
key: 13,
name: 'Jim Green sr.',
age: 72,
address: 'London No. 1 Lake Park',
},
],
},
{
key: '2',
name: 'Joe Black',
age: 42,
address: 'London No. 1 Lake Park',
},
{
key: '3',
name: 'Jim Green',
age: 32,
address: 'Sidney No. 1 Lake Park',
},
{
key: '4',
name: 'Jim Red',
age: 32,
address: 'London No. 2 Lake Park',
},
]
export default {
data() {
return {
columns,
loadData: loadData, // 实际请用上方 loadData2 代替此处函数
}
},
methods:{
infinteLoad() {
console.log('滚动加载啦！')
}
}
}
</script>
显示代码
# Table 参数列表
| 参数 | 方式 | 示例 | 解释 |
|---|---|---|---|
| columns | Prop | columns="[] | 【必填项】表格表头部分 |
| dataSource | Prop | function loadData (parameter) { var requestParameters=Object.assign({},parameter);return getMethods(requestParameters).then((function(res){return res.result}))} | 【必填项】数据源，必须为函数，参考下默认值 |
| rowKey | Prop | rowKey="key" | 【必填项】表格行 key 的取值，可以是字符串或一个函数 |
| childrenKey | Prop | childrenKey="embedChildren" | 指定树状展开子节点列表的键名 |
| childrenColumnName | Prop | childrenColumnName="children" | 指定树形结构的列名（修改 children 为指定字段） |
| showPagiantion | Prop | showPagiantion="auto" | 是否展示页面 |
| pagination | Prop | pagination="{}" | 可为布尔值，或者对象（参考 antdv 文档里 pagination 相关配置） |
| expandedRowKeys | Prop | expandedRowKeys="[]" | 展开的行，控制属性。可用 .sync 后缀 |
| expandIcon | Prop | expandIcon="search" | 自定义展开图标 |
| rowClassName | Prop | rowClassName="()=>{}" | 每行的类名设置 |
| allowExpandEmpty | Prop | allowExpandEmpty="true" | 是否允许展开空节点 |
| scroll | Prop | scroll="{x:1980,y:300}" | 设置横向或纵向滚动，也可用于指定滚动区域的宽和高，建议为 x 设置一个数字，如果要设置为 true，需要配合样式 .ant-table td { white-space: nowrap; } |
| alert | Prop | alert="true" || alert="{save:true,delete:true,invalid:true,export: ()=>{}}" | 批量操作预设的选项，可以为布尔值，也可以为函数 例如delete:true或delete:()=>{} |
| showBatch | Prop | showBatch="true" | 是否始终展示批量操作框,还是根据是否勾选了选中项来展示 |
| msgItem | Slots | msgItem="<template #msgItem>msgItem</template>" | alert为ture或对象时的插槽，展示相关信息 |
| alertItem | Slots | alertItem="<template #alertItem>alertItem</template>" | alert为ture或对象时的插槽，在最右边，一般用于添加按钮 |
| expand | Action | @expand="()=>{}" | 展开触发的事件 |
| batchOpt | Action | @batchOpt="()=>{}" | 批量操作时触发的事件 |
| rowLock | Action | @rowLock="(record,index)=>{}" | 单击选中高亮事件 |
# Columns 参数列表
| 参数 | 方式 | 示例 | 解释 |
|---|---|---|---|
| infinte | Prop | infinte="true" | 开启滚动加载 |
| infiniteLoadAll | Prop | infiniteLoadAll="true" | 全部加载完成，不再触发滚动加载事件 |
| infiniteHight | Prop | infiniteHight="300px" | 滚动加载的高度 |
| infinteLoad | Prop | @infinteLoad="infinteLoad" | 滚动加载的回调事件 |
| fixed | Prop | fixed="right" | 固定列位置，不会随滚动条滚动 |
| sort | Prop | sort="true" | 是否展示排序 |
| hideAble | Prop | hideAble="true" | 是否可以隐藏该列 |
| filters | Prop | filters="[ { text: 'London',value: 'London',},{text: 'New York',value: 'New York',},]" | 是否展示筛选 |
| scopedSlots | Slots | filterDropdown="filterDropdown" | 是否展示搜索筛选 |
| scopedSlots | Slots | filterIcon="filterIcon" | 修改搜索筛选 Icon |
| scopedSlots | Slots | customRender="name" | 表格内容的插槽 |
| slots | Slots | title="customTitle" | 表头内容的插槽 |
# 事件
| 参数 | 方式 | 示例 | 解释 |
|---|---|---|---|
| clear | Prop | this.$refs.table.clear() | 清空表格 |
| clearSelected | Prop | this.$refs.table.clearSelected() | 清空选中状态 |
| refresh | Prop | this.$refs.table.refresh() | 刷新表格,重新请求 |