作用域插槽简单应用

作用域插槽简单应用

Parent.vue

<template>
  <div class="content">
    <Child
      :data="data"
      :columns="columns"
    >
      <template slot="name" slot-scope="{ row }">
        姓名：{{ row.name }}
      </template>

      <template slot="age" slot-scope="{ row }">
        {{ row.age }} -- {{ row.age }}
      </template>

      <template slot="action" slot-scope="{ row }">
        <a href="javascript:;" @click="edit(row)">编辑</a>
      </template>
    </Child>
  </div>
</template>

<script>
import Child from "@/components/Child";

export default {
  name: "Parent",

  components: {
    Child,
  },

  data() {
    return {
      data: [
        {
          name: "John Brown",
          age: 18,
          address: "New York No. 1 Lake Park",
        },
        {
          name: "Jim Green",
          age: 24,
          address: "London No. 1 Lake Park",
        },
        {
          name: "Joe Black",
          age: 30,
          address: "Sydney No. 1 Lake Park",
        },
        {
          name: "Jon Snow",
          age: 26,
          address: "Ottawa No. 2 Lake Park",
        },
      ],
      columns: [
        {
          title: '姓名',
          key: 'name',
        },
        {
          title: '年龄',
          key: 'age',
        },
        {
          title: '地址',
          key: 'address',
        },
        {
          title: '操作',
          key: 'action',
        }
      ]
    };
  },

  methods: {
    edit(row) {
      console.log(row.name);
    }
  }
};
</script>

<style scoped>
.content {
  width: 800px;
}
</style>

Child.vue

<template>
  <table border class="table">
    <thead>
      <tr>
        <th
          v-for="(item, index) in columns"
          :key="index"
          class="th"
        >
          {{ item.title }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr
        class="data-item"
        v-for="(data_row, data_index) in data"
        :key="data_index"
      >
        <td
          v-for="(item, index) in columns"
          :key="index"
        >
          <template v-if="$scopedSlots[item.key]">
            <slot :name="item.key" :row="data_row"></slot>
          </template>
          <template v-else>{{ data_row[item.key] }}</template>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  name: 'Child',

  props: {
    data: {
      type: Array,
      required: true,
      default() {
        return []
      }
    },

    columns: {
      type: Array,
      required: true,
      default() {
        return []
      }
    }
  },
}
</script>

<style scoped>
.table {
  width: 100%;
}

.th {
  height: 40px;
  text-align: center;
}

.data-item {
  height: 48px;
}

td {
  text-align: center;
}
</style>

效果图