两个滚动

kimi

2020-01-22 ec112f5ce69edb933e4914bbb9d8dbc34358d172

两个滚动

 src/components/square.vue

@@ -1,40 +1,38 @@
<template>
    <div>
        <el-row >
          <el-col :span="18"><el-form label-width="80px" :inline="true" :label-position="labelPosition" :model="formInline" class="form-inline">
            <el-form-item label="标题">
                <el-input v-model="formInline.title" placeholder="标题"></el-input>
            </el-form-item>
			
            <el-form-item label="描述">
                <el-input v-model="formInline.desp" placeholder="描述"></el-input>
            </el-form-item>
			
			
            <el-form-item >
                <el-button type="primary" @click="query_">查询</el-button>
                <el-button type="info" @click="empty_">重置</el-button>
            </el-form-item>
			
			
            </el-form></el-col>
          <el-col :span="18">
                <el-form label-width="80px" :inline="true" :label-position="labelPosition" :model="formInline" class="form-inline">
                    <el-form-item label="标题">
                        <el-input v-model="formInline.title" placeholder="标题"></el-input>
                    </el-form-item>
					
                    <el-form-item label="描述">
                        <el-input v-model="formInline.desp" placeholder="描述"></el-input>
                    </el-form-item>
					
                    <el-form-item >
                        <el-button type="primary" @click="query_">查询</el-button>
                        <el-button type="info" @click="empty_">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
          <el-col :span="4" ><el-button type="primary" @click="createNew">创建</el-button></el-col>
        </el-row>
        

    <div class="infinite-list-wrapper" style="overflow:auto">
    <div class="infinite-list-wrapper" style="overflow:auto; height: 75vh; border-top: 1px solid #c3c5c7;">
        
        <div class="list" v-infinite-scroll="load" infinite-scroll-disabled="disabled">
            <div v-for="one in dataList" :key="one.id" class="list-item" @click="showItem(one)">
                <el-row >
                  <el-col :span="8"><div class="grid-content">{{one.title}}</div></el-col>
                  <el-col :span="4" :offset="12"><div class="">{{one.time}}</div></el-col>
                  <el-col :span="20"><div class="grid-content z_grid-content1 grid-content_text">{{one.title}}</div></el-col>
                  <el-col :span="4"><div class="grid-content z_grid-content1 grid-content_time">{{one.time}}</div></el-col>
                </el-row>
                
                <el-row>
                  <el-col :span="20"><div class="grid-content">{{one.desp}}</div></el-col>
                  <el-col :span="20"><div class="grid-content z_grid-content2">{{one.desp}}</div></el-col>
                </el-row>
                <el-divider></el-divider>
            </div>
        </div>
        <p v-if="loading">加载中...</p>
@@ -45,7 +43,7 @@
      :visible.sync="dialogVisible"
      width="40%"
      height="40%"
      :before-close="handleClose">
      custom-class="handleClose">
      <span>{{selectOne.title}}</span>
      <el-divider></el-divider>
     <div style="content">
@@ -95,7 +93,7 @@
                 fileList: [],
                 dialogVisible: false,
                 dialogFormVisible: false,
                labelPosition: "left",
                labelPosition: "right",
                formInline:{},
                selectOne:{
                    title:"biaoti",
@@ -103,8 +101,13 @@
                    attachment:"222"
                },
                dataList: [
                    {id:1,attachment:"222",title:"标题", desp:"描述121212121212", time:"12分钟前"},
                    {id:1,attachment:"222",title:"标题", desp:"描述时发生纠纷司符合双方酒叟发动机时代峰峻配电间 刀片机水电费搜豆腐皮搜的看法我都叫打破是觉得批发商附加费第三季度破发接收到发地方就搜到到四点分发偶读囧", time:"12分钟前"},
                    {id:1,attachment:"222",title:"11", desp:"111", time:"11111"},
                    {id:1,attachment:"",title:"11", desp:"111", time:"11111"},
                    {id:1,attachment:"",title:"11", desp:"111", time:"11111"},
                    {id:1,attachment:"",title:"11", desp:"111", time:"11111"},
                    {id:1,attachment:"",title:"11", desp:"111", time:"11111"},
                    {id:1,attachment:"",title:"11", desp:"111", time:"11111"},
                    {id:1,attachment:"",title:"11", desp:"111", time:"11111"},
                    {id:1,attachment:"",title:"11", desp:"111", time:"11111"},
                ],
@@ -187,7 +190,56 @@
        text-align: left;
        padding: 5px;
    }
	
    .grid-content_text {
        font-weight: bold;
        font-style: italic;
        color: #000;
    }
    .grid-content_time {
        font-weight: bold;
        font-style: italic;
        color: #909399;
    }
    .z_grid-content1{
      display:table-cell;
      vertical-align:bottom;
        height: 50px;
    }
    .z_grid-content2{
      color: #83878a;
        padding: 0px;
      height: 40px;
        line-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .content{
        
    }
	
    .form-inline {
        text-align: left;
    }
	
    .list {
		
    }
    .list-item {
        margin-top: 20px;
        padding-bottom: 5px;
        border-bottom: 1px solid #c3c5c7;
    }
	
    .handleClose {
        margin: 10px;
        text-align: left;
    }
    .handleClose .el-dialog__body {
        padding: 10px 20px;
    }
    .handleClose .el-divider--horizontal{
        margin: 5px;
    }
</style>