# xTable 组件
TIP
xTable 表格是对 element-ui table 的封装，并且内部引用了 xForm，用于生成搜索框
# 基本用法
配置 json，生成 table 表格，本示例展示了 xTable 的各种用法：数据字典、过滤器、生成搜索框 等
共 4 条
- 10条/页
- 20条/页
无数据
- 1
<template>
<div v-loading="loading">
<x-table
v-model="searchData"
:config="configTable"
:data="tableData"
:page="page"
:load="getTableList" />
</div>
</template>
<script>
export default {
data() {
const _this = this
return {
loading: false,
tableData: [
{ name: '张三', sex: 'male', phone: 13222222222 },
{ name: '李四', sex: 'female', phone: 13222222222 },
{ name: '王二', sex: 'male', phone: 13222222222 },
{ name: '麻子', sex: 'female', phone: 13222222222 }
],
page: {
pageSizes: [10, 20],
pageSize: 10,
pageNum: 1,
total: 4
},
searchData: {},
configTable: {
stripe: true,
labelWidth: 'auto',
btn: [ // 适合控制表单的按钮
{ text: '其他', click: () => {console.log('其他')}, icon: 'el-icon-more' }
],
tableBtn: [ // 适合控制table的按钮
{ text: '新增', click: () => {console.log('新增')}, icon: 'el-icon-circle-plus' }
],
column: [
{
type: 'index'
},
{
label: '名称',
name: 'name',
search: true,
xType: 'input'
},
{
label: '名称2',
name: 'name2',
show: false,
search: true,
xType: 'input'
},
{
label: '性别',
name: 'sex',
search: true,
xType: 'select',
dic: [
{ label: '全部', value: '' },
{ label: '男', value: 'male' },
{ label: '女', value: 'female' }]
},
{
label: '手机',
name: 'phone',
formatter: (row, column, cellValue, index) => '+86 ' + cellValue
},
],
operate: [
{ text: '编辑', type: 'text', show: true, click: () => console.log('编辑') },
{ text: '详情', type: 'text', show: true, click: (row, index) => console.log(row, index) }, // row当前行数据 index 当前行索引
{ text: '更多1', dropdown: true, type: 'text', show: true, click: () => console.log('更多1') },
{ text: '更多2', dropdown: true, type: 'text', show: true, click: row => console.log(row) },
{ text: '更多3', dropdown: true, type: 'text', show: true, click: () => console.log('更多3') },
]
}
}
},
methods: {
getTableList() {
// xhr
},
}
}
</script>
<style scoped>
</style>
显示代码
# 多选
选择多行数据时使用 Checkbox。
<template>
<div v-loading="loading">
<el-button @click="toggleSelection(tableData[0], tableData[2])">切换张三和王二选中状态</el-button>
<el-button @click="clearSelection">取消选择</el-button>
<x-table
ref="xTable"
v-model="searchData"
:config="configTable"
:data="tableData"
:load="getTableList" />
</div>
</template>
<script>
export default {
data() {
const _this = this
return {
loading: false,
tableData: [
{ name: '张三', sex: 'male', phone: 13222222222 },
{ name: '李四', sex: 'female', phone: 13222222222 },
{ name: '王二', sex: 'male', phone: 13222222222 },
{ name: '麻子', sex: 'female', phone: 13222222222 }
],
searchData: {},
configTable: {
stripe: true,
labelWidth: 'auto',
resetBtn: false,
selectionChange: selection => console.log(selection),
column: [
{
type: 'selection'
},
{
label: '名称',
name: 'name',
},
{
label: '性别',
name: 'sex',
dic: [
{ label: '全部', value: '' },
{ label: '男', value: 'male' },
{ label: '女', value: 'female' }]
},
{
label: '手机',
name: 'phone',
formatter: (row, column, cellValue, index) => '+86 ' + cellValue
},
]
}
}
},
methods: {
getTableList() {
// xhr
},
toggleSelection(...rows) {
rows.forEach(row => {
this.$refs.xTable.toggleRowSelection(row);
});
},
clearSelection() {
this.$refs.xTable.clearSelection();
}
}
}
</script>
<style scoped>
</style>
显示代码
# 排序
通过设置 column 的属性 sortable=true 可以实现前端排序，也可设置 sortable=custom 实现前端排序
<template>
<div v-loading="loading">
<x-table
ref="xTable"
v-model="searchData"
:config="configTable"
:data="tableData"
:load="getTableList" />
</div>
</template>
<script>
export default {
data() {
const _this = this
return {
loading: false,
tableData: [
{ name: '张三', sex: 'male', phone: 13222222222 },
{ name: '李四', sex: 'female', phone: 13222222222 },
{ name: '王二', sex: 'male', phone: 13222222222 },
{ name: '麻子', sex: 'female', phone: 13222222222 }
],
searchData: {},
configTable: {
stripe: true,
labelWidth: 'auto',
resetBtn: false,
sortChange: a => _this.$message.success(a.prop + " " + a.order),
column: [
{
label: '名称',
name: 'name',
sortable: true,
},
{
label: '性别',
name: 'sex',
dic: [
{ label: '全部', value: '' },
{ label: '男', value: 'male' },
{ label: '女', value: 'female' }]
},
{
label: '手机',
name: 'phone',
formatter: (row, column, cellValue, index) => '+86 ' + cellValue
},
]
}
}
},
methods: {
getTableList() {
// xhr
}
}
}
</script>
<style scoped>
</style>
显示代码
# slot 插槽
通过设置 column 的属性 slot=true 可以实现自定义插槽，也可在搜索框和表格之间插入自定义内容
搜索框和表格之间插入自定义内容
<template>
<div v-loading="loading">
<x-table
ref="xTable"
v-model="searchData"
:config="configTable"
:data="tableData"
:load="getTableList">
<template #middle>
<span style="color: #F56C6C">搜索框和表格之间插入自定义内容</span>
</template>
<template #phone="scope">
<el-tag>
{{ '+86 ' + scope.row.phone }}
</el-tag>
</template>
</x-table>
</div>
</template>
<script>
export default {
data() {
const _this = this
return {
loading: false,
tableData: [
{ name: '张三', sex: 'male', phone: 13222222222 },
{ name: '李四', sex: 'female', phone: 13222222222 },
{ name: '王二', sex: 'male', phone: 13222222222 },
{ name: '麻子', sex: 'female', phone: 13222222222 }
],
searchData: {},
configTable: {
stripe: true,
labelWidth: 'auto',
resetBtn: false,
sortChange: a => _this.$message.success(a.prop + " " + a.order),
column: [
{
xType: 'input',
label: '名称',
name: 'name',
sortable: true,
search: true
},
{
label: '性别',
name: 'sex',
search: true,
xType: 'select',
dic: [
{ label: '全部', value: '' },
{ label: '男', value: 'male' },
{ label: '女', value: 'female' }]
},
{
label: '手机',
name: 'phone',
slot: true
},
]
}
}
},
methods: {
getTableList() {
// xhr
}
}
}
</script>
<style scoped>
</style>
显示代码
# 树形数据
支持树类型的数据的显示。当 row 中包含 children 字段时，被视为树形数据。渲染树形数据时，必须要指定 row-key
<template>
<div v-loading="loading">
<x-table
ref="xTable"
v-model="searchData"
:config="configTable"
:data="tableData"
:load="getTableList" />
</div>
</template>
<script>
export default {
data() {
const _this = this
return {
loading: false,
tableData: [{
id: "1",
name: "xx公司",
username: '张三',
phone: 13222222222,
children: [
{
id: "2",
name: "技术部",
username: '李四',
phone: 13222222222,
children: [
{ id: "4", name: "Java 组", username: '王二', phone: 13222222222, },
{ id: "5", name: "Web 组", username: '麻子', phone: 13222222222, },
{ id: "6", name: "PHP 组", username: '张三', phone: 13222222222, },
{ id: "7", name: "Python 组", username: '张三', phone: 13222222222, }
]
},
{ id: "3", name: "售后部", username: '张三', phone: 13222222222, }
]
}],
searchData: {},
configTable: {
stripe: true,
labelWidth: 'auto',
resetBtn: false,
rowKey: "id",
defaultExpandAll: true,
column: [
{
label: '部门名称',
name: 'name',
align: 'left',
},
{
label: '负责人',
name: 'username'
},
{
label: '电话',
name: 'phone',
formatter: (row, column, cellValue, index) => '+86 ' + cellValue
},
]
}
}
},
methods: {
getTableList() {
// xhr
}
}
}
</script>
<style scoped>
</style>
显示代码
# 多级表头
支持多级表头。
共 4 条
- 10条/页
- 20条/页
无数据
- 1
<template>
<div v-loading="loading">
<x-table
v-model="searchData"
:config="configTable"
:data="tableData"
:page="page"
:load="getTableList" />
</div>
</template>
<script>
export default {
data() {
const _this = this
return {
loading: false,
tableData: [
{
name: '张三',
sex: 'male',
phone: 13222222222,
age: 18,
location: '北京市',
height: 180,
weight: 130
},
{
name: '李四',
sex: 'female',
phone: 13222222222,
age: 18,
location: '北京市',
height: 180,
weight: 130
},
{
name: '王二',
sex: 'male',
phone: 13222222222,
age: 18,
location: '北京市',
height: 180,
weight: 130
},
{
name: '麻子',
sex: 'female',
phone: 1322222222,
age: 18,
location: '北京市',
height: 180,
weight: 130
}
],
page: {
pageSizes: [10, 20],
pageSize: 10,
pageNum: 1,
total: 4
},
searchData: {},
configTable: {
stripe: true,
labelWidth: 'auto',
column: [
{
type: 'index'
},
{
label: '姓名',
name: 'name',
search: true,
xType: 'input'
},
{
label: '性别',
name: 'sex',
search: true,
xType: 'select',
dic: [
{ label: '全部', value: '' },
{ label: '男', value: 'male' },
{ label: '女', value: 'female' }
]
},
{
label: '个人信息',
children: [
{
label: '身材',
children: [
{
label: '身高',
name: 'height'
},
{
label: '体重',
name: 'weight'
}
]
},
{
label: '地区',
name: 'location'
},
{
label: '年龄',
name: 'age'
}
]
},
{
label: '手机',
name: 'phone',
formatter: (row, column, cellValue, index) => '+86 ' + cellValue
}
],
operate: [
{ text: '编辑', type: 'text', show: true, click: () => console.log('编辑') },
{ text: '详情', type: 'text', show: true, click: () => console.log('详情') }
]
}
}
},
methods: {
getTableList() {
// xhr
},
}
}
</script>
<style scoped>
</style>
显示代码