1.封装的组件写法
<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>
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: booleanprivate currentRow: any = nullprivate 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.使用
//引入
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>
)
