VUE 纵向表格
表格拼装看下效果<el-table ref="mainTable" :data="tddata" border style="width: 12%;float:left;" v-loading="listLoading" size="mini" :stripe="true" id="ptd"><el-table-column align="center" prop="name"
·
表格拼装
看下效果
<el-table ref="mainTable" :data="tddata" border style="width: 12%;float:left;" v-loading="listLoading" size="mini" :stripe="true" id="ptd">
<el-table-column align="center" prop="name" label="参数名称">
<template slot="header" slot-scope="scope">
<span style="height:28px;line-height:28px;">参数名称</span>
</template>
<template slot-scope="scope">
{{ scope.row.name}}
</template>
</el-table-column>
</el-table>
<el-table :data="item.data" border style="width: 22%; float: left;border-left-width:0px;" v-loading="listLoading" size="mini" :stripe="true" v-for="item in tds" :key="item.id">
<el-table-column align="center" :label="item.name">
<template slot="header" slot-scope="scope">
<el-select clearable placeholder="请选择项目" v-model="item.propertyid" remote filterable :remote-method="remoteMethod" size="mini" @@change="propertychange">
<el-option v-for="item in propertylist"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<template slot-scope="scope">
<i v-if="scope.row.value!=''" class="line-limit-length">
{{scope.row.value}}
</i>
<i v-else>-</i>
</template>
</el-table-column>
</el-table><style>
.line-limit-length {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/*overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;*/
}
</style>new Vue({
el: "#userapp",
data() {
return {
propertylist: '',
tds: [
{ id: 1, propertyid: '', name: '-', data: [{ value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' },]},
{ id: 2, propertyid: '', name: '-', data: [{ value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' },] },
{ id: 3, propertyid: '', name: '-', data: [{ value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' },] },
{ id: 4, propertyid: '', name: '-', data: [{ value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' },] },
//{ id: 5, propertyid: '', name: '-', data: [{ value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }] },24个
//{ id: 6, propertyid: '',name: '-', data: [{ value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }, { value: '-' }] },
],
tddata: [
{
name: "项目名称",
value: "propertyname",
},
{
name: "所属楼盘",
value: "anothername",
},
{
name: "均价",
value: "floorprice",
},
{
name: "区域",
value: "areaname",
},
{
name: "板块",
value: "streetname",
},
{
name: "开发商",
value: "developername",
},
{
name: "开盘时间",
value: "opentime",
},
{
name: "交房时间",
value: "deliverytime",
},
{
name: "项目地址",
value: "address",
},
{
name: "占地面积",
value: "areacovered",
},
{
name: "建筑面积",
value: "constructionarea",
},
{
name: "规划户数",
value: "plannednumber",
},
{
name: "车位数",
value: "parking",
},
{
name: "车位比",
value: "parkingratio",
},
{
name: "建筑类别",
value: "strucname",
},
{
name: "容积率",
value: "plot",
},
{
name: "绿化率",
value: "greening",
},
{
name: "轨道交通",
value: "railtransit",
},
{
name: "面积范围",
value: "arearange",
},
{
name: "物业公司",
value: "management",
},
{
name: "物业费",
value: "managementfee",
},
{
name: "代理商",
value: "agent",
},
{
name: "售房部",
value: "salesdepartment",
},
{
name: "联系电话",
value: "salesdepartmentphone",
},
],
listLoading:false
}
},
methods: {
//楼盘
remoteMethod(query) {//参数为当前input输入值
if (query !== '') {
this.propertydata(query)
}
},
propertydata(name) {
let token = $('input[name="__RequestVerificationToken"]').val()
//this.select.__RequestVerificationToken = token;
let that = this
$.ajax({
type: 'post',
url: 'XXXXXXXXXXXXXXXXXXXX',
async: true,
datatype: 'json',
data: { "name": name },
success: function (response) {
if (response.code == 200) {
that.propertylist = response.data
}
}
})
},
propertychange(propertyid) {
let that = this
$.ajax({
type: 'get',
url: 'XXXXXXXXXXXXXXXXXXXXXXX',
async: true,
datatype: 'json',
data: { "ID": propertyid},
success: function (response) {
if (response.code == 200) {
let data = response.data
let dataarr = []
console.log(data)
for (var i = 0; i < that.tddata.length; i++) {
let val = data[that.tddata[i].value] != null && data[that.tddata[i].value] != undefined ? data[that.tddata[i].value] : ''
dataarr.push({ value: val})
}
that.tds.find(a => a.propertyid == propertyid).data = dataarr
}
}
})
}
},
})
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献2条内容
所有评论(0)