Vue之项目搭建

<template>
  <div id="tables">
    <el-button type="primary" @click="add">添加</el-button>
    <table>
            <tr>
                <th>ID</th>
                <th>名称</th>
                <th>面积</th>
                <th>人口</th>
                <th>GDP</th>
                <th>操作</th>
            </tr>
            <tr v-for="value,key in tableData">
                <td>{{value.id}}</td>
                <td>{{value.name}}</td>
                <td>{{value.area}}</td>
                <td>{{value.population}}</td>
                <td>{{value.gdp}}</td>
                <td>
                    <el-button type="info" @click="edit(key)">编辑</el-button>
                    <el-button type="warning" @click="del(key)">删除</el-button>
                </td>
            </tr>
        </table>
    <forms :province="province" :state="state" :tableData="tableData" @cancel="is_show" :edit_key="edit_key"/>
  </div>
</template>

<script>
  import forms from './forms'export default {
    name:'tables',
    data:function () {
      return{
        tableData: [{
            id: 1,
            name: '广东',
            area: 20.3,
            population:5.3,
            gdp:5.5},],
        province:{},
        state:false,
        edit_key:-1}
    },
    components:{
      forms
    },
    created:function(){
      let _this=this;
      this.$axios.get('http://127.0.0.1:8000/homework/tables/')
    .then(function (response) {
            _this.tableData=response.data;
    })
    .catch(function (error) {
            console.log(error);
    });
    },
    methods:{
      add:function () {
        this.state=true
      },
      is_show:function (value) {
        this.state=!value;
        this.province={};
        this.edit_key=-1},
      edit:function (key) {
        this.state=true;
        this.edit_key=key;
        this.province=this.tableData[key]
      },
      del:function (key) {
        this.tableData.splice(key,1)
      }
    }
  }
</script>

<style scoped>
#tables{
1200px;
  margin: 0 auto;
}
table{
     1000px;
    border-collapse: collapse; /* 合并表格的边框 */}
tr{
    height: 42px;
}
table,td,th{
    border: 1px solid black;
  text-align: center;
}
</style>

<template>
  <div id="forms" v-show="state">
    <div class="box">
      <el-row>
        <el-col :span="24">
          <label for="name">名称:</label>
          <input type="text" id="name" v-model="province.name">
        </el-col>
        <el-col :span="24">
          <label for="area">面积:</label>
          <input type="text" id="area" v-model="province.area">
        </el-col>
        <el-col :span="24">
          <label for="population">人口:</label>
          <input type="text" id="population" v-model="province.population">
        </el-col>
        <el-col :span="24">
          <label for="gdp">GDP:</label>
          <input type="text" id="gdp" v-model="province.gdp">
        </el-col>
        <el-col :span="24">
          <el-button type="success" @click="edit_key<0?add():save()">提交</el-button>
          <el-button type="danger" @click="cancel">取消</el-button>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>export default {
    name:'forms',
    props:['province','state','tableData','edit_key'],
    data:function () {
      return{

      }
    },
    methods:{
      add:function () {
        let value=0;
        if (this.tableData.length==0){
           value=1}
        else{
            value=this.tableData[this.tableData.length-1].id+1;
        }
        this.province['id']=value;
        this.tableData.push(this.province);
        this.cancel();
      },
      save:function(){
        this.cancel();
        let num=this.edit_key;
        this.tableData[num]=this.province
      },
      cancel:function () {
        this.$emit('cancel',this.state)
      }
    }
  }
</script>

<style scoped>
#forms{
   100%;
  height:100%;
  background-color: rgba(235,235,235,0.5);
  position: absolute;
  top: 0;
  left: 0;
}
.box{
  margin: 0 auto;
  margin-top: 200px;
   400px;
  height: 300px;
  background-color: white;
  padding: 20px 30px;
}
.box .el-col{
  margin-bottom: 20px;
}
.box input{
  300px ;
  height: 30px;
}
</style>