vue+element-ui改写table(1)

动态表格生成：

动态表格的生成主要是为了可复用性

---

主要根据table的属性自己动态生成表格，让表格得以有复用性

helloWorld组件
<template>
  <div>
  <el-table
          :data="tableData"
          border
          fixed
          @cell-dblclick="cellDblclick"
          :row-class-name="tableRowClassName"
          style="width: 100%">
    <el-table-column//表头生成后，绑定prop的属性 table的data就会匹配对应的数据
            v-for="(item,key,index) in tableclo" :key="key" :index="index"
            :prop="key"
            :label="item"
            width="200">
    </el-table-column>
    <el-table-column
            label="操作"
            width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableclo:{
          date:"日期",
          name:"名字",
          province:"省份",
          city:"市区",
          address:"地址",
          zip:"邮编",

        },
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1518 弄',
          zip: 200333
        }, {
          date: '2016-05-04',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1517 弄',
          zip: 200333
        }, {
          date: '2016-05-01',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1519 弄',
          zip: 200333
        }, {
          date: '2016-05-03',
          name: '王小虎',
          province: '上海',
          city: '普陀区',
          address: '上海市普陀区金沙江路 1516 弄',
          zip: 200333
        }]
     
        }
      }
    
    
  }
</script>

app.vue组件
<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
data(){return{

}},
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

下一篇主要写改写表格实现表格行内编辑