# MTable
以下字段为表格的扩展和默认配置，其他配置请参照el-table
| 字段 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| border | 是否带有纵向边框 | boolean | true |
| tableData | 表格数据 | Array | - |
| isTree | 是否为树形表格 | boolean | false |
| layout | 分页器组件布局 | string | 'total,sizes,prev, pager, next, jumper' |
| showNum | 是否显示序号列 | boolean | true |
| numTitle | 序号列名称 | string | '序号' |
| selection | 表格是否展示多选列 | boolean | false |
| expand | 表格是否可以展开 | boolean | false |
| columns | 表格描述列信息 | Array | - |
| page | 分页信息 | Object | |
| pageSizes | 可选择每页多少条数据 | Array | [15, 30, 45, 60] |
| mergeRow | 可合并列字段 | Array | - |
| mergeColumn | 可合并行字段 | Array | - |
# 基础用法
自定义列可以通过 render方法 jsx语法。或者slot-scope 来自定义列 树形结构数据的支持需要elemen-ui >=2.7
{
"border": false,
"stripe": false,
"isTree": false,
"showPage": false,
"size": "small",
"showNum": false
}
<template>
<div>
<m-form :model="options" :columns='optionsColumns'></m-form>
{{options}}
<br>
<m-table :table-data='tableData' :page='pageInfo' @pageChange='pageChange' row-key='id' :columns='columns' v-bind="options">
<template slot="slot" slot-scope="{row,$index}">
$index = {{$index}}
</template>
</m-table>
</div>
</template>
<script>
import tableData from './data.json'
export default {
data() {
return {
options:{
border:false,
stripe:false,
isTree:false,
showPage:false,
size:'small',
showNum:false
},
pageInfo:{
pageSize:15,
pageNum:1,
total:0
},
optionsColumns:[
{
label:'斑马线',
el:'switch',
prop:'stripe',
},{
label:'树形结构',
el:'switch',
prop:'isTree',
},{
label:'纵向边框',
el:'switch',
prop:'border',
},{
label:'分页',
el:'switch',
prop:'showPage',
},{
label:'尺寸',
prop:'size',
el:'radio-group',
type:'button',
dataList:[
{
label:'medium',
value:'medium'
},{
label:'small',
value:'small'
},{
label:'mini',
value:'mini'
}
]
},{
label:'序号列',
prop:'showNum',
el:'switch',
}
],
columns:[
{
prop:'value',
label:'名称',
align:'left',
width:150,
},{
label:'描述',
prop:'label',
},{
label:'id',
prop:'id',
},{
label:'slotScope渲染',
prop:'slot',
width:130,
},{
label:'状态',
prop:'state',
format(obj){
return obj.state?'启用':'禁用'
}
},
{
label:'render渲染',
prop:'render',
render:(h,scope)=>{
return <el-button type='primary'>编辑</el-button>
},
}
]
}
},
computed:{
tableData(){
let list = JSON.parse(JSON.stringify(tableData))
if(this.options.isTree){
return list
}else{
return list.reduce(function flat(arr,obj){
if(obj.children){
obj.children.reduce(flat,arr)
delete obj.children
}
arr.push(obj)
return arr
},[])
}
}
},
methods: {
pageChange(pageInfo){
this.pageInfo = pageInfo
}
}
};
</script>
显示代码
# 多级表头、排序、多选
<template>
<div>
<m-table
:table-data="tableData"
ref="mtable"
:columns="columns"
:showPage="false"
selection
@selection-change="selectChange"
height="400"
:showNum="false"
>
<template slot="date" slot-scope="scope">{{scope.row.date}}</template>
</m-table>
<br>
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [],
columns: [
{
prop: "date",
fixed: true,
sortable: true,
width: "120",
renderHeader: (h, scope) => {
return (
<span>
<i class="el-icon-time" />日期
</span>
);
}
},
{
label: "配送信息",
children: [
{
prop: "name",
width: "120",
render: (h, scope) => {
return <el-tag>{scope.row.name}</el-tag>;
}
},
{
label: "地址",
children: [
{
prop: "province",
label: "省份",
width: "120"
},
{
prop: "city",
label: "市区",
width: "120"
},
{
prop: "address",
label: "地址",
sortable: true,
width: "300px",
renderHeader: (h, scope) => {
return (
<span>
<i class="el-icon-location-outline" />地址
</span>
);
}
}
]
}
]
}
]
};
},
created() {
for (let i = 0; i < 10; i++) {
this.tableData.push({
date: `2016-05-${i + 1}`,
name: `王小虎${i + 1}`,
province: "上海",
city: "普陀区",
address: `上海市普陀区金沙江路 ${i + 1} 弄`,
zip: 200333
});
}
},
methods: {
selectChange(arr) {
console.log(arr);
},
toggleSelection(rows) {
if (rows) {
this.$refs.mtable.toggleRowSelection(rows);
} else {
this.$refs.mtable.clearSelection();
}
}
}
};
</script>
显示代码
# 展开行
<template>
<m-table :columns="tableData.column"
:table-data="tableData.data" expand :showNum='false' :border='false'>
<template slot="expand" slot-scope="{row}">
<m-form :model='row' :columns='columns' class="demo-table-expand"></m-form>
</template>
</m-table>
</template>
<script>
export default {
data () {
return {
columns:[
{
label:'商品名称',
prop:'name'
},{
label:'所属店铺',
prop:'shop'
},{
label:'商品 ID',
prop:'id'
},{
label:'店铺 ID',
prop:'shopId'
},{
label:'商品分类',
prop:'category'
},{
label:'店铺地址',
prop:'address'
},{
label:'商品描述',
prop:'desc',
span:22
}
],
tableData: {
column: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'name',
label: '商品名称'
},
{
prop: 'desc',
label: '描述'
}
],
data: [
{
id: '12987122',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
},
{
id: '12987123',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
},
{
id: '12987125',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
},
{
id: '12987126',
name: '好滋好味鸡蛋仔',
category: '江浙小吃、小吃零食',
desc: '荷兰优质淡奶，奶香浓而不腻',
address: '上海市普陀区真北路',
shop: '王小虎夫妻店',
shopId: '10333'
}
]
}
}
}
}
</script>
<style>
.demo-table-expand label {
color: #99a9bf;
}
</style>
显示代码
# 合计行
自动合计只需在需要合并的列sSummary为true,unit 为单位,如果想要手动合并summaryMethod
<template>
<m-table :tableData='tableData' :columns='columns' :showPage='false' sum-text='总计' ></m-table>
</template>
<script>
export default {
data () {
return {
columns: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'amount1',
label: '数值1',
sortable: true
},
{
prop: 'amount2',
label: '数值2',
sortable: true,
isSummary:true,
},
{
prop: 'amount3',
label: '数值3',
sortable: true,
isSummary:true,
unit:'元',
isCurrency:true
}
],
tableData: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '4',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount2: '1',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4',
amount3: 15
}
]
}
}
}
</script>
显示代码
# 合并单元格
自动合并单元格传入需要合并的行和列的字段，列的合并是根据值相同合并，行的合并是根据当前属性后的几个字段为undefined 如果要手动合并传入span-method方法
<template>
<m-table :tableData='tableData' :columns='columns' :showPage='false' :showNum='false'
:merge-row='mergeRow'
:merge-column='mergeColumn'
></m-table>
</template>
<script>
export default {
data () {
return {
mergeColumn:['amount1'],
mergeRow:['name'],
columns: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'amount1',
label: '数值1',
sortable: true
},
{
prop: 'amount2',
label: '数值2',
sortable: true
},
{
prop: 'amount3',
label: '数值3',
sortable: true
}
],
tableData: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount1: '324',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4',
amount3: 15
}
]
}
}
}
</script>
显示代码
# 编辑表格
通过getColumn合并当前column对象来渲染组件
<template>
<m-table :tableData='tableData' :columns='columns' :showPage='false' :showNum='false'>
<template slot="btn" slot-scope="scope">
<el-button type="text" v-if='!scope.row.edit' @click="edit(scope.row)">编辑</el-button>
<el-button v-else type="text" @click="save(scope.row)">保存</el-button>
<el-button type="text" v-if='scope.row.edit' @click="cancel(scope.row)">取消</el-button>
</template>
</m-table>
</template>
<script>
export default {
data () {
return {
columns: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'name',
label: '姓名',
getColumn:row=>({el:row.edit?'input':null})
},
{
prop: 'amount1',
label: '数值1',
sortable: true,
},
{
prop: 'amount2',
label: '数值2',
sortable: true,
getColumn:row=>({el:row.edit?'input':null})
},
{
prop: 'amount3',
label: '数值3',
sortable: true
},{
label:'操作',
prop:'btn'
}
],
tableData: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3',
edit:false,
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '3',
edit:false,
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount2: '3',
amount1: '324',
edit:false,
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2',
edit:false,
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4',
edit:false,
amount3: 15
}
]
}
},
methods: {
edit(row){
row.edit = true
row._copyObj = JSON.stringify(row)
},
save(row){
row.edit = false
delete row._copyObj
},
cancel(row){
Object.assign(row,JSON.parse(row._copyObj),{edit:false})
delete obj._copyObj
},
}
}
</script>
显示代码
# 导出excel
<template>
<div>
<el-button type="primary" @click="exportExcel">导出excel</el-button>
<m-table :tableData='tableData' :columns='columns' ref="mtable" :showPage='false' :showNum='false'>
</m-table>
</div>
</template>
<script>
export default {
data () {
return {
columns: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'name',
label: '姓名',
},
{
prop: 'amount1',
label: '数值1',
sortable: true,
},
{
prop: 'amount2',
label: '数值2',
sortable: true,
},
{
prop: 'amount3',
label: '数值3',
sortable: true
}
],
tableData: [
{
id: '12987122',
name: '王小虎',
amount1: '234',
amount2: '3',
amount3: 10
},
{
id: '12987123',
name: '王小虎',
amount1: '165',
amount2: '3',
amount3: 12
},
{
id: '12987124',
name: '王小虎',
amount2: '3',
amount1: '324',
amount3: 9
},
{
id: '12987125',
name: '王小虎',
amount1: '621',
amount2: '2',
amount3: 17
},
{
id: '12987126',
name: '王小虎',
amount1: '539',
amount2: '4',
amount3: 15
}
]
}
},
methods: {
exportExcel(){
this.$refs.mtable.exportCsv({
filename:'导出excel'
})
}
}
}
</script>
显示代码
# 拖拽行
需要指定row-key, drop为true,drop-change事件会返回顺序变化后的数据
<template>
<m-table :tableData='tableData' :columns='columns' :showPage='false' row-key='id' drop @drop-change='dropChange' ></m-table>
</template>
<script>
export default {
data () {
return {
columns: [
{
prop: 'id',
label: 'ID'
},
{
prop: 'name',
label: '姓名'
},
{
prop: 'amount1',
label: '数值1',
},
{
prop: 'amount2',
label: '数值2',
},
{
prop: 'amount3',
label: '数值3',
}
],
tableData: [
{
id: '12987122',
name: '王小虎1',
amount1: '234',
amount2: '3',
amount3: 10
},
{
id: '12987123',
name: '王小虎2',
amount1: '165',
amount2: '4',
amount3: 12
},
{
id: '12987124',
name: '王小虎3',
amount1: '324',
amount2: '1',
amount3: 9
},
{
id: '12987125',
name: '王小虎4',
amount1: '621',
amount2: '2',
amount3: 17
},
{
id: '12987126',
name: '王小虎5',
amount1: '539',
amount2: '4',
amount3: 15
}
]
}
},
methods:{
dropChange(tableData){
this.tableData = tableData
}
}
}
</script>
显示代码