1、第一种:Vue 1.0,常规的table表格

 <template>
          <thead>
	      <tr>												                                               	
                <th type="selection" width="45px" ></th>   //序号框
		  <th v-for='col in AtableData' :prop="col.TypeID" :key="TypeID" >{{col.Type}}</th>   //获取表头
	      </tr>
	 </thead>
	<tbody class="data-tbody" id="tbody">
            <tr v-for='item in list'>
         	<td>
		   <input type="checkbox" name="checked" v-bind:id="item.ClassID">
	      </td>
              <td v-for='it in AtableData'>{{item[it.TypeID]}}</td>   //根据表头的id来获取表格内容
                  </tr>
	 </tbody>	
	 </template>
	   <script>里面写上:
	   export default {
		name: 'HelloWorld',
		data() {
			return {    
			        AtableData:[], //初始化列表头                 
                            list:[],//初始化列内容
                           }
			}
	   methods: {
			getData() {
			var schoolId="";
				if(this.IsAllDesk != 2 || this.IsAllDesk != "2") {
					schoolId =$("#school").val();
				}
				/*接口请求*/
				this.$http.post(this.GLOBAL.serverSrc+'/DeskChair/DeskConfig/Statistic', {"SchoolID": schoolId}{
					header: {},
					emulateJSON: true
				}).then((res) => {
					//console.info(res);
					if(res.body.code == "0") {
						if(res.body.result.length > 0 && res.body.result != "结果为空") {
							this.AtableData=res.body.tableTitle;
							this.list = res.body.result;   //后台返回的数组(包括表头和表内容,)
							setTimeout(function() {
								this.selectChange();
							}.bind(this), 2)
							//console.info(this.list);
							this.warnMessage = "操作成功";
							this.colorMessage = "green"
						} else {
							this.list = [];
							this.warnMessage = "暂无数据";
							this.colorMessage = "red"
						}
					} else {
						this.warnMessage = "获取数据失败";
						this.colorMessage = "red"
					}
				}).catch(err => {
					this.warnMessage = "访问接口失败";
					this.colorMessage = "red"
				})
			}
			}
		    }
	   后台先返回表头的json数组如下格式:需返回tableTile表头的列名及列名id,然后result即表格内容需要与列id关联,从而来填充表格内容  

在这里插入图片描述
2、利用element来动态生成表格(相对而言第一种而言这个比较简单方便)

<el-table class="table data-table" :data="Atables.slice((currentPage-1)*pagesize,currentPage*pagesize)" ref="multipleTable" tooltip-effect="dark" style="border:1;width: 100%;" @selection-change='selectArInfo' >																				
	<el-table-column type="selection" width="7px" ></el-table-column>
	<el-table-column class="data-order" label="序号" width="50px" type="index"></el-table-column>
      <template v-for='(col,index) in list'>                                        
          <el-table-column sortable :show-overflow-tooltip="true" :prop="col.TypeID" :label="col.Type" :key="col.TypeID" width="100px"> 
         </el-table-column>                                         
      </template>                                       
   </el-table>
<script>
export default {
		name: 'HelloWorld',
		data() {
			return {  
			(第一种方式直接在这里把数据写死的,不需要调用下面的methods方法)
			   Atables: [{
                       name: '福兰',
                       Type0: '0号',
                      Type1: '1号',
                      Type2: '2号',
                      Type3: '3号',
                    }, {
                     name: '福特',
                       Type0: '0号',
                      Type1: '1号',
                      Type2: '2号',
                      Type3: '3号',
                      Type4: '4号',                
           }],
          list: [{
               TypeID: 'name',
               Name: '某某'
        }, {
              TypeID: 'Type0',
               Name: '0号'
        }, {
           TypeID: 'Type1',
               Name: '1号'
        }, {
          TypeID: 'Type2',
               Name: '2号'
        }, {
           TypeID: 'Type3',
               Name: '3号'
        }]
       ( 第二种方式调用后台返回数据的(下面的methods方法是这里调用的))
	                     Atables:[], //初始化列表头                 
                            list:[],//初始化列内容                         
                           }
			}
	   methods: {
	              //表格内容
			getData() {
			var schoolId="";
				/*接口请求*/
				this.$http.post(this.GLOBAL.serverSrc+'/DeskChair/DeskConfig/Statistic', {"SchoolID": schoolId}{
					header: {},
					emulateJSON: true
				}).then((res) => {
					//console.info(res);
					if(res.body.code == "0") {
						if(res.body.result.length > 0 && res.body.result != "结果为空") {
							this.AtableData=res.body.tableTitle;
							this.list = res.body.result;   //后台返回的数组(包括表头和表内容,)
							setTimeout(function() {
								this.selectChange();
							}.bind(this), 2)
							//console.info(this.list);
							this.warnMessage = "操作成功";
							this.colorMessage = "green"
						} else {
							this.list = [];
							this.warnMessage = "暂无数据";
							this.colorMessage = "red"
						}
					} else {
						this.warnMessage = "获取数据失败";
						this.colorMessage = "red"
					}
				}).catch(err => {
					this.warnMessage = "访问接口失败";
					this.colorMessage = "red"
				})
			}
			}
		    }
</script>
Logo

前往低代码交流专区

更多推荐