码迷,mamicode.com
首页 > 其他好文 > 详细

学习项目-前端-第四课:ElementUI: dialog and select

时间:2020-07-11 00:14:59      阅读:93      评论:0      收藏:0      [点我收藏+]

标签:list   code   rip   pager   creat   val   eth   log   日期   

一、dialog-->vueadmin-template-master-->src-->views-->table-->gathering.vue

<template>
  <div>
    <br />
    <el-form :inline="true">
      <el-form-item label="活动名称" placeholder="活动名称">
        <el-input v-model="searchMap.name"></el-input>
      </el-form-item>
      <el-form-item label="活动日期">
        <el-date-picker v-model="searchMap.starttime_1" type="date" placeholder="选择开始日期"></el-date-picker>
        <el-date-picker v-model="searchMap.starttime_2" type="date" placeholder="选择结束日期"></el-date-picker>
      </el-form-item>
      <el-button @click="fetchData()" type="primary">查询</el-button>
      <el-button @click="dialogFormVisible=true" type="primary">新增</el-button>
    </el-form>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="活动ID" width="180"></el-table-column>
      <el-table-column prop="name" label="活动名称" width="180"></el-table-column>
      <el-table-column prop="sponsor" label="主办方" width="180"></el-table-column>
      <el-table-column prop="address" label="活动地址" width="180"></el-table-column>
      <el-table-column prop="starttime" label="开始时间" width="180"></el-table-column>
      <el-table-column prop="endtime" label="结束时间" width="180"></el-table-column>
      <el-table-column prop="summary" label="描述" width="180"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="fetchData"
      @current-change="fetchData"
      :current-page.sync="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="pojo.name" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item label="基本地址">
          <el-input v-model="pojo.address" placeholder="基本地址"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker v-model="pojo.starttime" type="date" placeholder="开始日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="截止日期">
          <el-date-picker v-model="pojo.endtime" type="date" placeholder="截止日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="报名截止">
          <el-date-picker v-model="pojo.enrolltime" type="date" placeholder="报名截止"></el-date-picker>
        </el-form-item>
        <el-form-item label="活动详情">
          <el-input v-model="pojo.detail" type="textarea" :rows="2" placeholder="活动详情"></el-input>
        </el-form-item>
        <el-form-item label="是否可见">
          <el-switch v-model="pojo.state" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">保存</el-button>
          <el-button @click="dialogFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import gatheringApi from "@/api/gathering";
export default {
  data() {
    return {
      list: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      searchMap: {},
      dialogFormVisible: false,
      pojo: {}
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      /*       gatheringApi.getList().then( response=>{
        this.list = response.data
      }), */
      gatheringApi
        .search(this.currentPage, this.pageSize, this.searchMap)
        .then(response => {
          (this.list = response.data.rows), (this.total = response.data.total);
        });
    }
  }
};
</script>

 二、select-->vueadmin-template-master-->src-->views-->table-->gathering.vue

1、vueadmin-template-master-->src-->api-->city.js

import request from ‘@/utils/request‘
export default {
    getList(){
        return request(
            {
                url : ‘/base/city‘,
                method : ‘get‘
            }
        );
    }
}

2、vueadmin-template-master-->src-->views-->table-->gathering.vue

<template>
  <div>
    <br />
    <el-form :inline="true">
      <el-form-item label="活动名称" placeholder="活动名称">
        <el-input v-model="searchMap.name"></el-input>
      </el-form-item>
      <el-form-item label="活动日期">
        <el-date-picker v-model="searchMap.starttime_1" type="date" placeholder="选择开始日期"></el-date-picker>
        <el-date-picker v-model="searchMap.starttime_2" type="date" placeholder="选择结束日期"></el-date-picker>
      </el-form-item>
      <el-button @click="fetchData()" type="primary">查询</el-button>
      <el-button @click="dialogFormVisible=true" type="primary">新增</el-button>
    </el-form>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="活动ID" width="180"></el-table-column>
      <el-table-column prop="name" label="活动名称" width="180"></el-table-column>
      <el-table-column prop="sponsor" label="主办方" width="180"></el-table-column>
      <el-table-column prop="address" label="活动地址" width="180"></el-table-column>
      <el-table-column prop="starttime" label="开始时间" width="180"></el-table-column>
      <el-table-column prop="endtime" label="结束时间" width="180"></el-table-column>
      <el-table-column prop="summary" label="描述" width="180"></el-table-column>
    </el-table>
    <el-pagination
      @size-change="fetchData"
      @current-change="fetchData"
      :current-page.sync="currentPage"
      :page-sizes="[5, 10, 20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    ></el-pagination>
    <el-dialog title="编辑" :visible.sync="dialogFormVisible">
      <el-form label-width="80px">
        <el-form-item label="活动名称">
          <el-input v-model="pojo.name" placeholder="活动名称"></el-input>
        </el-form-item>
        <el-form-item label="基本地址">
          <el-input v-model="pojo.address" placeholder="基本地址"></el-input>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker v-model="pojo.starttime" type="date" placeholder="开始日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="截止日期">
          <el-date-picker v-model="pojo.endtime" type="date" placeholder="截止日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="报名截止">
          <el-date-picker v-model="pojo.enrolltime" type="date" placeholder="报名截止"></el-date-picker>
        </el-form-item>
        <el-form-item label="活动详情">
          <el-input v-model="pojo.detail" type="textarea" :rows="2" placeholder="活动详情"></el-input>
        </el-form-item>
        <el-form-item label-width="選擇城市">
          <el-select v-model="pojo.city" placeholder="請選擇">
            <el-option
              v-for="item in cityList"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否可见">
          <el-switch v-model="pojo.state" active-value="1" inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">保存</el-button>
          <el-button @click="dialogFormVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import gatheringApi from "@/api/gathering";
import cityApi from @/api/city;
export default {
  data() {
    return {
      list: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      searchMap: {},
      dialogFormVisible: false,
      pojo: {},
      cityList : []
    };
  },
  created() {
    this.fetchData();
    cityApi.getList().then(response=>{
      this.cityList = response.data;
    });
  },
  methods: {
    fetchData() {
      /*       gatheringApi.getList().then( response=>{
        this.list = response.data
      }), */
      gatheringApi
        .search(this.currentPage, this.pageSize, this.searchMap)
        .then(response => {
          (this.list = response.data.rows), (this.total = response.data.total);
        });
    }
  }
};
</script>

 

学习项目-前端-第四课:ElementUI: dialog and select

标签:list   code   rip   pager   creat   val   eth   log   日期   

原文地址:https://www.cnblogs.com/DotSDot/p/13281863.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!