本文主要是介绍elementUI的table使用展开功能( type=“expand“ ),展开时合起上一次展开的内容,始终保持展开内容为一个,并且再次点击合起自身，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
直接上代码了没什么可讲的,主要是用到
row-key="id"
:expand-row-keys="expands
@row-click="handleRowClick"
<template><div class="ele-body"><el-card shadow="never"><!-- 数据表格 --><ele-pro-tableref="table":columns="columns":datasource="datasource"height="calc(100vh - 266px)"tool-class="ele-toolbar-form":toolkit="[]"cache-key="recordTable"row-key="id":expand-row-keys="expands"@row-click="handleRowClick"highlight-current-row@current-change="handleCurrentChange"><template v-slot:toolbar><!-- 搜索表单 --><rectify-search @search="reload"> </rectify-search></template><!-- 展开内容 --><template v-slot:expand="{ row }"><el-table :data="row.riskList" :show-header="true"><el-table-column label="序号" type="index" width="50"></el-table-column><el-table-column label="不符合项描述" show-overflow-tooltip><template v-slot="{ row }"><span>{{ row.problemDescription }}</span></template></el-table-column><el-table-column label="整改截止日期" width="130"><template v-slot="{ row }"><div>{{ $util.toDateString(row.endDate, 'yyyy-MM-dd') }}</div></template></el-table-column><el-table-column label="不符合项" show-overflow-tooltip><template v-slot="{ row }"><span>{{'【' +row.checkMasterName +'】' +row.checkItemCode +' ' +row.checkItemName}}</span></template></el-table-column><el-table-column label="整改状态" width="110" show-overflow-tooltip><template v-slot="{ row }"><el-tag size="small" type="primary" :disable-transitions="true">{{ getDictName('rectify_status', row.rectifyStatus) }}</el-tag></template></el-table-column><el-table-column label="回执内容" width="230"><template v-slot="{ row }"><span>{{ row.receiptDescription }}</span></template></el-table-column><el-table-column label="操作" width="240" align="center"><template v-slot="{ row }"><el-linktype="primary":underline="false"icon="el-icon-search"@click="openEdit(row)">查看</el-link><el-linkv-if="row.rectifyStatus < 1"type="primary":underline="false"icon="el-icon-_retrieve"@click="toCorrect(row)">纠正回执</el-link><!-- <el-linkv-if="row.rectifyStatus != 0"type="primary":underline="false"icon="el-icon-_retrieve">已回执</el-link> --></template></el-table-column></el-table></template><template v-slot:superviseType="{ row }">{{ getDictName('supervise_type', row.superviseType) }}</template><!-- 操作列 --><template v-slot:action="{ row }"><el-linktype="primary":underline="false"icon="el-icon-search"@click="openSheetAll(row)">查看</el-link></template></ele-pro-table></el-card><rectify-edit :visible.sync="showEdit" :data="current"></rectify-edit><rectify-correct-edit:visible.sync="showCorrectEdit":data="currentCorrect"@done="reload"></rectify-correct-edit></div>
</template><script>import rectifyEdit from './components/rectify-edit.vue';import rectifyCorrectEdit from './components/rectify-correct-edit.vue';import rectifySearch from './components/rectify-search.vue';import { pageDisposalOrders } from '@/api/disposal/disposal-order';export default {name: 'rectify',components: {rectifySearch,rectifyCorrectEdit,rectifyEdit},data() {return {showEdit: false,showCorrectEdit: false,columns: [{width: 45,type: 'expand',columnKey: 'expand',align: 'center',slot: 'expand'},{prop: 'code',label: '处置单编号',sortable: 'custom',showOverflowTooltip: true,width: 220},{prop: 'orderType',label: '任务类型',showOverflowTooltip: true,minWidth: 110,slot: 'orderType',formatter: (_row, _column, cellValue) => {return this.$globalDictName('order_type', cellValue);}},{prop: 'superviseType',label: '监督方式',sortable: 'custom',slot: 'superviseType',minWidth: 140},{prop: 'orgName',label: '监督站',sortable: 'custom',showOverflowTooltip: true,minWidth: 140},{prop: 'unitCode',label: '生产单位',sortable: 'custom',showOverflowTooltip: true,width: 180,formatter: (_row, _column, cellValue) => {return this.$globalOrgName(cellValue);}},{prop: 'description',label: '任务描述',sortable: 'custom',showOverflowTooltip: true,minWidth: 140},{prop: 'findDate',label: '监督日期',sortable: 'custom',showOverflowTooltip: true,width: 180,formatter: (_row, _column, cellValue) => {return this.$util.toDateString(cellValue, 'yyyy-MM-dd');}}],current: {},currentCorrect: {},expands: [],currentRow: null};},created() {},methods: {handleRowClick(row) {if (this.expands.includes(row.id)) {this.expands = this.expands.filter((val) => val !== row.id);} else {this.expands = [];this.expands.push(row.id);}},handleCurrentChange(val) {this.currentRow = val;},/* 表格数据源 */datasource({ page, limit, where, order }) {let statusList = null; //'(0,-1,-2)';return pageDisposalOrders({...where,...order,page,limit,auditStatus: 0,rectifyStatus: 0,statusIds: statusList});// return data;},getDictName(type, code) {return this.$globalDictName(type, code);},/* 刷新表格 */reload(where) {this.$refs.table.reload({ where: where });},/* 打开所有记录 */openEdit(row) {this.current = row;this.showEdit = true;},toCorrect(row) {this.currentCorrect = row;this.showCorrectEdit = true;}}};
</script>
这篇关于elementUI的table使用展开功能( type=“expand“ ),展开时合起上一次展开的内容,始终保持展开内容为一个,并且再次点击合起自身的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
