本文给出子组件的原代码，以及父组件的应用demo。可以来我的主页看我封装的其他组件
```javascript
<template>
<el-table
:data="data"
:border='border'
:stripe='stripe'
:height='height'
:fit ='fit'
:formatter_Prop='formatter_Prop'
:formatter_Data='formatter_Data'
@row-contextmenu='rowContextmenu'
@row-dblclick='rowDblclick'
@selection-change='selectionChange'>
<!-- 对应列的类型 selection/index/expand -->
<template v-for="(typeItem, index) in table_types">
<el-table-column
:key='index'
:type="typeItem.type"
:fixed='typeItem.fixed'
:label='typeItem.label'>
</el-table-column>
</template>
<!-- 展示后台给返的数据 -->
<!-- <template > -->
<el-table-column
v-for="(column, index) in columns"
:prop="column.prop"
:key='column.label'
:label="column.label"
:align="column.align?column.align:'left'"
:header-align="column.header_align?column.header_align:column.align"
:width="column.width?column.width:'auto'"
:fixed='column.fixed?column.fixed:false'>
<template slot-scope="scope">
<!-- 没有button时，直接渲染 -->
<template v-if="!column.button">
<span>
<!-- formatterProp为格式化之后的字段，请在父组件进行格式化 -->
{{scope.row[column.formatterProp]?scope.row[column.formatterProp]:scope.row[column.prop]}}
</span>
</template>
<!-- 有button时 -->
<template v-if='column.button'>
<el-button :key="index" class="tableButton" @click="clickButton(scope.row)">
<span>
<!-- formatterProp为格式化之后的字段，请在父组件进行格式化 -->
{{scope.row[column.formatterProp]?scope.row[column.formatterProp]:scope.row[column.prop]}}
</span>
</el-button>
</template>
</template>
</el-table-column>
<!-- </template> -->
<template v-if='column_edit.label'>
<el-table-column :label="column_edit.label"
:align="column_edit.align"
:header-align="column_edit.header_align?column_edit.header_align:column_edit.align">
<template slot-scope="scope">
<!-- 编辑/移除按钮时 -->
<template v-for='(buttonItem,index) in column_edit.buttons'>
<el-button :key="index" class="editButton" @click="editButtonClick(buttonItem.event,scope.row)">
{{buttonItem.label}}
</el-button>
</template>
</template>
</el-table-column>
</template>
</el-table>
</template>
<script>
export default {
name: 'Table',
data() {
return {
}
},
props: {
height: { //表格高度，非必传。
type: Number,
require: false,
default :100
},
stripe: { //是否为斑马条纹，非必传，默认不显示斑马条纹效果。
type: Boolean,
require: false,
default :false
},
border: { //是否带有纵向边框，非必传，默认有纵向边框。
type: Boolean,
require: false,
default :true
},
fit: { //列的宽度是否自撑开，非必传，默认有true。
type: Boolean,
require: false,
default :true
},
data: { //表格数据，非必传，数组格式。
type: Array,
require: false,
default () {
return []
}
},
formatter_Prop: { //要给表格的某列格式化的字段，非必传，数组格式。
type: Array,
require: false,
default () {
return null
}
},
formatter_Data: { //包含要给表格的某列格式化的字段对应的数据内容，非必传，数组格式。
type: Array,
require: false,
default () {
return []
}
},
columns: { //表头数据，需要展示的列，必传，数组嵌套对象的格式 [{},{},...] 。
type: Array,
require: false,
default () {
return []
//可选参数{ label:'', prop:'' , align:'left（默认）/center/right' , width:'number' ,fixed:true（默认）/left/right}
}
},
table_types: { //对应列的类型 selection/index/expand
type: Array,
require: false,
default () {
return []
}
},
column_edit: { //表格的操作-编辑/删除等
type: Object,
require: false,
default () {
return {
buttons:[],//必传
align:'left',
header_align:'left',
label:''
}
//用法如下
//{bottons:[{label:'按钮名称XXX',event:'点击按钮XXX父组件触发的事件名'},{label:'XXX',event:''}...],
// align:'center/left/right' 按钮单元格的内容区的元素对齐方式 非必传 默认left
// header_align:"center/left/right"} 按钮单元格的表头的对齐方式 非必传 默认left
// width:Number 按钮单元格的宽度 非必传
}
},
},
methods: {
/* 点击表格的按钮 */
clickButton(rowData) {
console.log(rowData)
this.$emit('click-button', rowData)//触发父组件事件@click-button，参数为当前行的数据。
},
/* 勾选表格的多选框 */
selectionChange(selection) {
console.log(selection)
this.$emit('selection-change', selection)//触发父组件事件@selection-change，参数为当前行的数据。
},
/* 点击表格的编辑/删除按钮时 */
editButtonClick(methodName,rowData) {
console.log(methodName)
// methodName 是什么返回给父组件事件名称就是什么。
this.$emit(methodName,rowData)//将点击按钮的事件名，传给父组件@methodName，参数为当前行的数据。
},
/* 当某一行被鼠标右键点击时会触发该事件 */
rowContextmenu(row, column, event) {
console.log(row, column, event)
this.$emit('row-contextmenu',row, column, event)//触发父组件事件@row-contextmenu。
},
/* 当某一行被双击时会触发该事件 */
rowDblclick(row, column, event) {
console.log(row, column, event)
this.$emit('row-dblclick',row, column, event)//触发父组件事件@row-dblclick。
},
},
watch: {
},
computed:{
},
mounted() {
},
created() {
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.tableButton {
padding: 0px;
border: none;
color: #0070D2;
font-size: 12px;
}
.editButton {
padding: 4px 20px;
color: #002257;
font-size: 12px;
}
</style>使用-template
<Table
:data='tableData3'
:columns='column'
:height="tableHeight"
@click-button="handleClick"
:table_types='optionstable'
:column_edit='columnEdit'
:formatter_Prop='formatterProp'
:formatter_Data='[datadjzt]'
@handleEdit='handleEdit'
@handleDelete='handleDelete'
@selection-change='handleSelect'>
</Table>使用-data
optionstable:[
{
type:'selection',
fixed:true,
},
{
type:'index',
label:'序号',
fixed:true,
},
],
formatterProp:['djZt'],
columnEdit:{
label:'操作',
buttons:[
{
label:'编辑',
event:'handleEdit'
},
{
label:'删除',
event:'handleDelete'
},
],
align:'center',
header_align:'left',//非必传，默认align是啥它就是啥
},
column:[
{
prop:'djRq',
label:'单据日期',
align:'center',
header_align:'right',
width:90,
fixed:true,
},
{
prop:'nsztmc',
label:'纳税主体名称',
},
{
prop:'djZt',
label:'单据状态',
align:'center',
formatterMethod:'djztValue',
button:true,
},
],使用-method
//data中定义的点击按钮的方法名称
handleEdit(rowData){
console.log(rowData)
},
//data中定义的点击按钮的方法名称
handleDelete(rowData){
console.log(rowData)
},
//某列的数据的点击事件
clickButton(rowData){
console.log(rowData)
},
//勾选表格
handleSelect(selection, row) {
console.log(selection);
this.rowbianji = selection;
},
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
