TableVue组件
<template>
<!-- table再组件化-->
<!-- 通过v-bind="$attrs" v-on="$listeners",把父组件传的属性全部绑定到子组件上,保证了api和el-table一致 -->
<el-table style="width: 100%" v-bind="$attrs" v-on="$listeners" border >
<!-- 多选框 -->
<!-- <el-table-column type="selection" width="55"></el-table-column>-->
<!-- :scope是绑定的动态属性,可以起任意喜欢的名字,但要注意在父组件中获取数据时key要对应 -->
<el-table-column v-for="(item, index) in columns" :key="index" v-bind="item.attrs">
<el-table-column type="selection" v-if="item.type==='selection'" width="55" />
<template slot-scope="scope" >
<slot :scope="scope" :name="item.slot" v-if="item.slot"></slot>
<template v-else>
{{scope.row[item.attrs.prop]}}
</template>
</template>
</el-table-column>
</el-table>
</template>
<script>
export default {
props: {
columns: {
type: Array,
default: () => []
}
}
}
</script>
<style scoped>
.el-table{
margin-top: 10px;
}
</style>
在父组件引入
html部分:
<!--引入表格组件 -->
<TableVue v-loading="loadingTable" :columns="columns" :data="list" empty-text="暂无数据">
<!-- #是v-slot的简写,{scope: {row, $index}}是属性对象slot双重解构,注意这里的scope要与子组件插槽绑定的属性名对应 -->
<template #handle="{scope: {row, $index}}">
<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">编辑</el-button>
<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row, $index)">删除</el-button>
</template>
</TableVue>
js部分:
import TableVue from '@/components/TableVue'
export default {
components: { TableVue },
data() {
return {
}
}
}
export default {data(){return{ }}}里面
loadingTable: false,
list: [],
columns: Object.freeze([
{ attrs: { prop: 'communityName', label: '小区', width: '140', align: 'center', 'show-overflow-tooltip': true }},
{ attrs: { prop: 'buildingName', label: '栋', width: '100', align: 'center', 'show-overflow-tooltip': true }},
{ slot: 'handle', attrs: { label: '操作', width: '120', 'class-name': 'small-padding fixed-width', align: 'center' }}
])
methods:{}里面:
// 按编辑按钮,弹出对话框
handleUpdate(row) {
this.dialogVisible = true
this.isEdit = true
this.editInfo = Object.assign({}, row)
},
handleDelete(row) {
console.log(row)
this.query.communityId = row.communityId
this.query.buildingId = row.buildingId
this.query.unitId = row.unitId
this.query.residentId = row.id
const query = this.query
this.$confirm('是否确认删除"' + row.residentName + '"的住户信息?', '警告',
{ confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
).then(function() {
return delResident(query)
}).then((res) => {
this.getList()
this.$message({
message: res.message,
type: res.code === 2000 ? 'success' : 'error'
})
}).catch(function() {
})
},
按编辑按钮出现的弹出框自己写,或者参考下面的(这个是另外写的组件,编辑和新增共用了同一个)。不了解的戳这里了解更多:vue-elementui新增编辑共用弹出框组件
<el-dialog :title="isEdit?'编辑住户信息':'添加住户信息'" :visible.sync="dialogVisible" :edit.sync="isEdit" width="700px">
<new-dialog v-if="dialogVisible" :visible.sync="dialogVisible" :edit.sync="isEdit" :edit-info="editInfo" />
</el-dialog>