问题：
之前一直用的iview的table组件库，虽然确实界面风格比较好看，但好多功能、特性尚未完全实现，在实现部分复杂功能时，存在一定的问题，用自定义组件+命令修改也能实现部分功能，但效果并不是很好。特此，还是使用elementui来实现这部分功能。
效果：
代码：
<template>
<div class="base_info">
<Row>
<Col>
<el-table
ref="table000"
:data="pagerData.data"
:row-key="pagerData.data.Id"
style="width: 100%"
border
:expand-row-keys="pagerData.data._expanded">
<el-table-column type="expand" width="1">
<template slot-scope="props">
<Card title='信息' style="margin: 0em auto;text-align: left;">
<!-- 这里本来是继续用element的写法，但看起来确实不如iview好看，就把前面的iview写法的代码拿了过来 -->
<Row>
<Col span="4" class="border_css column_singleline_label">
<font class="column_font">xxxx:</font>
</Col>
<Col span="8" class="border_css column_singleline_value">
<Input style="width: 320px;" v-model="props.row.Bean.1" placeholder="xxxx"></Input>
</Col>
<Col span="4" class="border_css column_singleline_label">
<font class="column_font">xxxxxx:</font>
</Col>
<Col span="8" class="border_css column_singleline_value">
<Input style="width: 200px;" v-model="props.row.Bean.2" placeholder="xxx"></Input>
</Col>
</Row>
<Row>
<Col span="4" class="border_css column_singleline_label">
<font class="column_font">xxx:</font>
</Col>
<Col span="8" class="border_css column_singleline_value">
<Select v-model="props.row.Bean.3" style="width:160px">
<Option v-for="level in levelList" :value="level.value" :key="level.value">{{ level.label }}</Option>
</Select>
</Col>
<Col span="4" class="border_css column_singleline_label">
<font class="column_font">xxxxx:</font>
</Col>
<Col span="8" class="border_css column_singleline_value">
<Select style="width:160px">
<Option v-for="level in levelList" :value="level.value" :key="level.value">{{ level.label }}</Option>
</Select>
</Col>
</Row>
<Row>
<Col span="4" class="border_css column_singleline_label">
<font class="column_font">xxxxx:</font>
</Col>
<Col span="8" class="border_css column_singleline_value">
<DatePicker style="width:160px;" v-model="props.row.Bean.Time" type="date" placeholder="时间"></DatePicker>
</Col>
<Col span="4" class="border_css column_singleline_label">
<font class="column_font">xxxxx:</font>
</Col>
<Col span="8" class="border_css column_singleline_value">
<InputNumber
:max="100000000"
v-model="props.row.Bean.Money"
:formatter="value => `¥ ${value}`.replace(/B(?=(d{3})+(?!d))/g, ',')"
:parser="value => value.replace(/$s?|(,*)/g, '')"></InputNumber>
</Col>
</Row>
<Row>
<Col span="20" class="border_css" style="height: 96px;line-height: 96px;text-align: -webkit-right;background-color: lightblue;">
<Row>
<Col span="4" class="border_css" style="height: 96px;line-height: 96px;text-align: center;background-color: lightblue;">
<font style="font-family: PingFang SC;font-size: 1.5em;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap;">情况</font>
<!-- <Button></Button> -->
<!-- 上传图片控件 需调试，需回调
-->
</Col>
<Col span="20" class="border_css" style="height: 96px;line-height: 96px;text-align: center;background-color: ghostwhite;">
<!-- 图片显示区域 -->
</Col>
</Row>
</Col>
<Col span="4" class="border_css" style="height: 96px;line-height: 96px;background-color: ghostwhite;">
<Row>
<Col class="border_css" style="height: 48px;line-height: 48px;text-align: center;background-color: lightblue;">
<font class="column_font">xxxx</font>
</Col>
</Row>
<Row>
<Col class="border_css" style="height: 48px;line-height: 48px;text-align: center;background-color: ghostwhite;">
<!--<font class="column_font">双笙</font>-->
<Input style="width: 200px;" v-model="props.row.Bean.Person" placeholder="xxxxx"></Input>
</Col>
</Row>
</Col>
</Row>
</Card>
</template>
</el-table-column>
<el-table-column
label="序号"
width="120"
prop="Id">
</el-table-column>
<el-table-column
label="项目"
fit="false"
width="240"
prop="Item">
</el-table-column>
<el-table-column
label="内容"
prop="Content">
</el-table-column>
<el-table-column
label="是否符合"
width="240">
<template slot-scope="scope">
<el-radio-group v-model="scope.row._expanded"
@change="handleExpanded($event,scope.row,scope.$index)">
<el-radio label="true">符合</el-radio>
<el-radio label="false">不符合</el-radio>
<!-- _expanded true 符合 不展开 false 不符合 展开 -->
</el-radio-group>
</template>
</el-table-column>
</el-table>
</Col>
</Row>
<div style="width: 100%;height: 120px;background-color: ghostwhite;margin-top: 32px;">
<Button type="primary" size="large" @click="save()">保存</Button>
<Button type="default" size="large" @click="back()">返回</Button>
</div>
</div>
</template>
<script>
export default{
components: {
},
props:{
},
data(){
return{
levelList: [
{
value: '0',
label: 'a'
},
{
value: '1',
label: 's'
},
{
value: '2',
label: 'd'
}
],
typeList: [
{
value: 'all',
label: 'w'
}
],
pagerData:{
data:[
],
page:{
//分页数
arrPageSize:[10,20,30,40],
//分页大小
pageSize:10,
//总分页数
pageCount:1,
//当前页面
pageCurrent:1,
//总数
totalCount:80
}
},
submitData:[]
}
},
mounted(){
console.log("SecondDayCheck -- created")
//用来实现嵌套对象在 Content-Type = application/x-www-form-urlencoded 报错的解决方案
/* var params = new URLSearchParams();
params.append('Id', '1');
params.append('Bean.Type', '0');*/
this.$axios({
method:"post",
url: this.server + "/Content",
data:JSON.stringify({
Id : 1,
Bean : {
Type : 0
}
}),
headers:{
/*'Content-Type': 'application/x-www-form-urlencoded'*/
'Content-Type': 'application/json'
}
})
.then(res=>{
let obj = JSON.parse(res.data.data);//.reverse();
for(var i in obj){
obj[i]._expanded = 'true'
obj[i].Bean = {
Id: '',//......部分字段未显示
Money: 0, //资金
Person: '' //
};
}
this.pagerData.data = obj
});
},
methods:{
save : function () {
this.submitData.splice(0,this.submitData.length)
this.$Message.info('Clicked 保存');
for(var i in this.pagerData.data){
if(this.pagerData.data[i]._expanded === 'false'){
this.submitData.push(this.pagerData.data[i]
}
}
this.$axios({
method:"post",
url: this.server + "/Content",
data: JSON.stringify(this.submitData),
headers:{
//'Content-Type': 'application/x-www-form-urlencoded'
'Content-Type': 'application/json'
}
})
.then(res=>{
});
},
back : function () {
this.$Message.info('Clicked 返回');
},
RowExpansion : function(row,expanded){
},
handleExpanded : function(event,row,index){
if(row._expanded === 'false'){
this.$refs.table000.toggleRowExpansion(row,true);
}else{
this.$refs.table000.toggleRowExpansion(row,false);
}
}
}
}
</script>
<style>
.base_info{
margin-top: 20px;
overflow-y: auto;
}
.border_css{
border: 1px solid black;
}
.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%;
}
.column_singleline_label{
height: 48px;
line-height: 48px;
text-align: -webkit-right;
background-color: lightblue;
}
.column_singleline_value{
height: 48px;
line-height: 48px;
background-color: ghostwhite;
padding-left: 1em;
}
.column_doubleline_label{
height: 96px;
line-height: 96px;
text-align: -webkit-right;
background-color: lightblue;
}
.column_doubleline_value{
height: 96px;
line-height: 96px;
background-color: ghostwhite;
padding-left: 1em;
}
.column_font{
font-family: PingFang SC;
font-size: 1.5em;
margin-right: 1em;
}
</style> 代码比较混乱，见谅！
解释：
1初始化的过程，用axios从后台传回来代码，对其遍历，先添加_expanded属性。
2然后，点击radio触发handleExpanded事件，通过ref标签控制扩展栏的扩展与否
关键点：
1 :row-key
用来确保扩展栏和table row对应
2 toggleRowExpansion
该方法是table methods，作用在table上，通过ref引用table，来操作