组件:
<!-- Table组件 带勾选框 -->
<template>
<div class='table'>
<el-table ref="multipleTable" :header-cell-style="{background:'#f0f1f5',color:'#000'}" :data="tableData" :max-height="height" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="selection" align="center" width="80px">
</el-table-column>
<el-table-column type="index" label="序号" align="center" width="80px">
</el-table-column>
<el-table-column :formatter="formatter" v-for="(item,index) in vForList" align="center" :key="index" :prop="item.prop" :label="item.label">
</el-table-column>
<el-table-column label="操作" align="center" fixed="right" width="180">
<template slot-scope="scope">
<slot name="button" :scope="scope.row" :index="scope.$index"></slot>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
export default {
components: {},
props: {
tableData: Array,
height: String,
vForList: Array
},
data() {
return {
};
},
computed: {},
watch: {},
methods: {
formatter(row, column, cellValue, index) {
// console.log('这是row', row);
// console.log('这是cellValue', cellValue);
if (cellValue === true) {
return "是"
} else if (cellValue === false) {
return "否"
} else {
return cellValue
}
},
handleSelectionChange(val) {
console.log('这是handleSelectionChange val', val);
this.$emit("handleSelectionChange",val)
}
},
//生命周期 - 创建完成(可以访问当前this实例)
created() {
},
//生命周期 - 挂载完成(可以访问DOM元素)
mounted() {
},
beforeCreate() { },
beforeMount() { },
beforeUpdate() { },
updated() { },
beforeDestroy() { },
destroyed() { },
//如果页面有keep-alive缓存功能,这个函数会触发
activated() { }
}
</script>
<style lang='less' scoped>
.table {
}
</style>
导入注册:
import Table from "@/components/Table"
components: { Table }
使用:
<Table :tableData="tableData1" :height="height" :vForList="vForList1" @handleSelectionChange="handleSelectionChange">
<template v-slot:button="scope">
<div class="flex1 jc-c slotButton">
<div class="f-color-ui-blue" @click="edit(scope.scope,scope.index)">修改</div>
<div class="f-color-ui-blue" @click="openOne(scope.scope,scope.index)" v-show="!scope.scope.is_normal">启用</div>
<div class="f-color-ui-blue" @click="disableOne(scope.scope,scope.index)" v-show="scope.scope.is_normal">禁用</div>
<div class="f-color-ui-red" @click="del(scope.scope,scope.index)">删除</div>
</div>
</template>
</Table>
tableData1: [{}],
vForList1: [
{ prop: "account_name", label: "账号" },
{ prop: "nickname", label: "姓名" },
{ prop: "phone", label: "手机号" },
{ prop: "position", label: "职位" },
{ prop: "company", label: "工作单位" },
],