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" 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
                        }
                    }
                })
            }
        },
    })