<template>
  <div class="content">
    <div class="btn">
       <Button type="primary" @click='addRow'>新增</Button>
    </div>

    <!-- 表格 -->
    <table class="tg" border='1'>
      <tr>
        <th class="tg-0pky" v-for='(item,index) in columns' :key='index'>{{item}}</th>
      </tr>

      <tr v-for='(item,index) in tableData' :key='index'>
        <td class="tg-0pky">
          <input type="text" :value="item.name" class="inpt">
        </td>
        <td class="tg-0pky">
          <Select style="width:100px" @on-change='change'>
              <Option v-for="(item,index) in selectArray" :value="item.id" :key="index">{{ item.name }}</Option>
          </Select>
        </td>
        <td class="tg-0pky">{{item.height}}</td>
        <td class="tg-0pky">{{item.scho}}</td>
        <td class="tg-0pky">
          <Button type="primary" @click='edit(item)'>编辑</Button>
          <Button type="primary" @click='del(index)'>删除</Button>
        </td>
      </tr>
    </table>

    <!-- 弹窗 -->
    <vtable-dilog ref='vtabledilog' :dilogObj='dilogObj'></vtable-dilog>
  </div>
</template>

<script>
  import VtableDilog from "./dilog/vtableDilog"
  export default {
    name:'HMytable',
    components:{
      VtableDilog
    },
    data() {
      return {
        dilogObj:{},
        modal1:false,
        selectArray:[
          {id:'1',name:'北京'},
          {id:'2',name:'上海'},
          {id:'3',name:'广州'},
          {id:'4',name:'深圳'},
        ],
        //show:false
      }
    },
    watch:{

    },
    props:{
      columns:{
        type:Array
      },
      tableData:{
        type:Array
      }
    },
    created() {
    },
    methods: {
      addRow(){
        var obj ={
          name:'',
          age:'',
          height:'',
          scho:''
        }
        this.tableData.push(obj)
      },
      del(index){
        this.tableData.splice(index,1)
      },
      change(val){

      },
      edit(item){
        this.$refs.vtabledilog.modal1= true;
        this.dilogObj = JSON.parse(JSON.stringify(item));
      },

    }
  }
</script>

<style lang="less" scoped>
  .content{
    width:100%;
    font-size:14px;
    .tg{
      width:100%;
      margin-top: 20px;
    }
  }
  .tg th{
    border-bottom: 1px solid #e8eaec;
    padding:10px 5px;
    background-color:#edeff0;
  }
  .tg td{
    border-bottom: 1px solid #e8eaec;
    padding:10px 5px;
    text-align:center;
  }
  .inpt{
    text-align: center;
    border: 1px solid #e8eaec;
    border-radius: 4px;
    padding: 5px;
    max-width: 100px;
  }
  .ivu-modal-header{
    background-color: #488CF3;
  }
</style>
