實(shí)現(xiàn)效果
文章來源:http://www.zghlxwxcb.cn/news/detail-634477.html
模板
<!-- 查詢條件 -->
<el-form label-width="60px" class="query-form">
<el-form-item label="狀態(tài):">
<el-select v-model="queryBody.status" clearable placeholder="請(qǐng)選擇狀態(tài)">
<el-option
v-for="item in status"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="大標(biāo)題:" class="query-title">
<el-input
v-model="queryBody.fuzzy"
placeholder="請(qǐng)輸入大標(biāo)題關(guān)鍵字"
clearable
/>
</el-form-item>
<el-button type="primary" class="query-btn" @click="queryIntegrateList">
查詢
</el-button>
</el-form>
<!-- 列表表格區(qū)域 -->
<el-table ref="refTable" :data="integrateList" border stripe
style="width: 100%" @expand-change="expandChange"
>
<el-table-column type="expand">
<template slot-scope="scope">
<el-form label-position="left" inline class="demo-table-expand">
<el-table :data="scope.row.child" border stripe style="width: 100%">
<el-table-column type="index" />
<el-table-column prop="title" label="小標(biāo)題" />
<el-table-column prop="author" label="作者" />
<el-table-column label="操作" width="180px">
<template slot-scope="scope">
<el-button
circle
type="primary"
icon="el-icon-search"
size="mini"
@click="xxx(scope.row.id)"
/>
</template>
</el-table-column>
</el-table>
</el-form>
</template>
</el-table-column>
<el-table-column prop="title" label="大標(biāo)題" />
<el-table-column prop="child.length" label="包含數(shù)量" />
<el-table-column label="狀態(tài)" prop="status">
<template slot-scope="scope">
<el-tag v-if="scope.row.status== 0" type="warning">
審核中
</el-tag>
<el-tag v-else-if="scope.row.status== 1" type="success">
審核通過
</el-tag>
<el-tag v-else type="danger">
審核駁回
</el-tag>
</template>
</el-table-column>
</el-table>
<!-- 分頁 -->
<el-pagination
:current-page="queryParams.pages"
:page-sizes="[5,10, 15, 20]"
:page-size="queryParams.size"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
js
data () {
return {
// 大欄目列表數(shù)據(jù)
integrateList: [],
total: 0,
// 查詢參數(shù)對(duì)象1(放在請(qǐng)求的params里,以?形式拼接)
queryParams: {
pages: 1,
size: 5
},
// 查詢參數(shù)對(duì)象
queryBody: {
fuzzy: '',
status: ''
},
// 大欄目狀態(tài)下拉列表
status: [
{
value: '',
label: '全部'
},
{
value: '0',
label: '審核中'
},
{
value: '1',
label: '審核通過'
},
{
value: '2',
label: '審核駁回'
}
]
}
},
mounted () {
this.InitIntegrateList()
},
methods: {
InitIntegrateList () {
//調(diào)用接口,初始化大欄目列表
},
//點(diǎn)擊查詢按鈕觸發(fā)
queryIntegrateList () {
this.queryParams.pages = 1
this.InitIntegrateList()
},
//頁面數(shù)據(jù)條數(shù)發(fā)生變化觸發(fā)
handleSizeChange (newPageSize) {
this.queryParams.size = newPageSize
this.InitIntegrateList()
},
//頁碼發(fā)生變化觸發(fā)
handleCurrentChange (newPageNum) {
this.queryParams.pages = newPageNum
this.InitIntegrateList()
},
//根據(jù)id查詢信息
xxx(id) {
//可能針對(duì)id調(diào)接口,查詢展示信息
},
// 只允許出現(xiàn)一個(gè)展開的大欄目
expandChange (row, expandedRows) {
let that = this
if (expandedRows.length > 1) {
that.expands = []
if (row) {
that.expands.push(row)
}
this.$refs.refTable.toggleRowExpansion(expandedRows[0])
} else {
that.expands = []
}
}
}
樣式
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 50%;
}
.query-form {
display: flex;
.query-title {
margin: 0 95px 0;
}
}
其它說明
data中integrateList根據(jù)后端返回的json數(shù)據(jù)確定,其格式為:文章來源地址http://www.zghlxwxcb.cn/news/detail-634477.html
[
{
"id": "1",
"title": "yyy",
"status": 1,
"child": [
{
"id": "1",
"title": "yyyy",
"author": "admin",
...
}
]
},
{
"id": "2",
"title": "2-777",
"status": 0,
"child": [
{
"id": "1",
"title": "ttt",
"author": "t1",
...
},
{
"id": "2",
"title": "qqq",
"author": "q1",
...
}
]
}
]
到了這里,關(guān)于Vue+Element-ui實(shí)現(xiàn)表格嵌套表格(表頭不同)的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!