1.封装的组件写法
javascript
<template>
<div style="height: calc( 100% - 33px);width:100%;position:relative">
<!-- 权限管理标题显示与否 -->
<div ref="operationBtnbox" class="operation-Btn-box" v-if="showOperationBtn">
<div class="operation-title">
<svg-icon :icon-class="tableConfigure.imgSrc"></svg-icon>
<p>{{ $t(tableConfigure.tableTitle) }}</p>
</div>
<el-row class="optionBtnBox">
<slot name="optionBtns" v-bind:currentSelectedRows="1"></slot>
</el-row>
</div>
<!-- 封装表格 -->
<el-table ref="singleTable" :data="tableData" @row-click="getNowRow" @selection-change="getSelectedData" :highlight-current-row="true"
@current-change="handleCurrentChange" :border="true" :header-cell-style="tableHeaderStyle">
<slot name="table_content"></slot>
</el-table>
</div>
</template>
javascript
public changeSelected(row) {
;(this.$refs.singleTable as any).toggleRowSelection(row)
}
//表头样式
private tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
if (rowIndex === 0) {
return `
background-color: var(--lyl_vxetableTitleColor);
color: #606266;
font-size:16px;
`
}
}
//接收初始化数据
@Prop({
required: true,
default: []
})
tableData: any
//接收标题数据,可以初始化自定义
@Prop({
default: () => {
return {
tableTitle: 'i18n.route_authManager',
imgSrc: 'jurisdiction_small'
}
}
})
tableConfigure: any
//接收标题是否显示的 boolean 控制
@Prop({
default: true
})
showOperationBtn: boolean
private currentRow: any = null
private handleCurrentChange(val) {
this.currentRow = val
}
// 获取选中行的数据
private getSelectedData(data) {
this.selectedData(data)
// console.log('getSelectedData:', data)
}
private async getNowRow(e) {
;(this.$refs.singleTable as any).toggleRowSelection(e)
// let es = JSON.parse(JSON.stringify(e))
this.onSure(e)
}
@Emit('onSure')
private onSure(data) {}
@Emit('selectedData')
private selectedData(data) {}
2.使用
javascript
//引入
import elemtTabel from '../../../components/elementTable/index.vue'
//注册
@Component({
components: {
elemtTabel,
}
})
//使用
<elemtTabel :tableData="roleTableData" @onSure="nowRowDataFn" :showOperationBtn="false">
<template v-slot:table_content>
<el-table-column align="center" width="65">
<template slot-scope="scope">
<el-radio class="radio" v-model="radio" :label="scope.$index"></el-radio>
</template>
</el-table-column>
<!-- 操作 -->
<el-table-column align="center" :label="$t('i18n.option')">
<template slot-scope="scope">
<!-- 编辑 -->
<span class="span_button" @click.stop="editRole(scope.row)" v-if="buttons.findIndex((item) => item == '编辑') > -1 || $store.state.system.currentUserInfo.id == 'admin'">{{ $t('i18n.editBtn') }}</span>
<!-- 删除 -->
<span class="span_button" @click="deleteRole" v-if="buttons.findIndex((item) => item == '删除') > -1 || $store.state.system.currentUserInfo.id == 'admin'">{{ $t('i18n.deleteBtn') }}</span>
</template>
</el-table-column>
</template>
</elemtTabel>