Vue.component自己封装一个组件

封装一个表格组件

组件

<template>
  <div>
    <table>
      <tr>
        <td v-for="(c, idx) in cols" :key="idx">{{ c.lable }}</td>
      </tr>
      <tr v-for="item in data" :key="item[cols[0].key]">
        <td v-for="(cc, idx) in cols" :key="idx">{{ item[cc.key] }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  name: "tb",
  props: ["cols", "data"]
};
</script>

在main.js中注册

import tb from './components/tb.vue'
Vue.component("tb", tb)

调用

<template>
  <div>
    <tb :cols="cols" :data="data"></tb>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cols: [
        {
          key: "id",
          lable: "编号"
        },
        {
          key: "name",
          lable: "名字"
        },
        {
          key: "age",
          lable: "年龄"
        }
      ],
      data: [
        { id: 1, name: "Simba", age: 20 },
        { id: 2, name: "Gouzei", age: 12 },
        { id: 3, name: "zhangsan", age: 30 },
        { id: 4, name: "Lisi", age: 42 }
      ]
    };
  }
};
</script>

<style>
table {
  width: 100%;
  text-align: center;
  border-collapse: collapse;
}
td {
  padding: 10px;
  border: 1px solid #ccc;
}
</style>