Vue封装通用table组件的完整步骤记录

下面我将详细讲解“Vue封装通用table组件的完整步骤记录”的完整攻略。

步骤一：创建组件

首先，我们需要在Vue项目中创建一个通用的table组件，可用于展示不同类型的数据。创建组件的过程如下：

<template>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.field">
            {{ column.title }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <td v-for="column in columns" :key="column.field">
            {{ row[column.field] }}
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  name: "Table",
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
};
</script>

<style scoped>
/* 样式 */
</style>

在这段代码中，我们创建了一个Table组件，这个组件接受两个props：columns和data。其中，columns表示表格的列属性，是一个数组类型，每个元素包含了title和field两个属性；data表示表格的数据，是一个数组类型，其中每个元素是一个对象类型，包含了对应列属性的值。在组件中，我们通过v-for指令渲染了表格的表头和表格体。

步骤二：封装Table组件

我们将上面创建的Table组件封装成一个插件，使之可以被其他Vue项目所使用。封装的过程如下：

// plugin.js
import Table from "./components/Table.vue";

const TablePlugin = {
  install(Vue) {
    Vue.component("table-component", Table);
  },
};

export default TablePlugin;

为了能够在Vue项目中引入TablePlugin插件，我们还需要在Vue项目的入口文件中进行注册，代码如下：

// main.js
import Vue from "vue";
import App from "./App.vue";
import TablePlugin from "./plugin";

Vue.use(TablePlugin);

new Vue({
  render: (h) => h(App),
}).$mount("#app");

步骤三：使用Table组件

我们在Vue项目中可以通过以下方式引入和使用Table组件：

<template>
  <div>
    <h1>Table组件示例</h1>
    <table-component :columns="columns" :data="data"></table-component>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      columns: [
        {
          title: "序号",
          field: "id",
        },
        {
          title: "姓名",
          field: "name",
        },
        {
          title: "年龄",
          field: "age",
        },
      ],
      data: [
        {
          id: 1,
          name: "张三",
          age: 26,
        },
        {
          id: 2,
          name: "李四",
          age: 23,
        },
        {
          id: 3,
          name: "王五",
          age: 28,
        },
      ],
    };
  },
};
</script>

在这个示例中，我们将Table组件引入到App组件中，并传入了columns和data两个prop。其中，columns表示表格的列属性，data表示表格的数据。最终，我们可以在页面上看到渲染出的表格。

示例一：动态传值

在使用Table组件的过程中，我们不仅可以静态地传入值，还可以动态地传入值。例如，我们可以在代码中定义一个变量，然后将其用作prop的值来动态控制表格的渲染结果：

<template>
  <div>
    <h1>动态传值示例</h1>
    <div>
      <button @click="handleClick">切换数据源</button>
    </div>
    <table-component :columns="columns" :data="currentData"></table-component>
  </div>
</template>

<script>
export default {
  name: "DynamicDataExample",
  data() {
    return {
      data1: [
        {
          id: 1,
          name: "张三",
          age: 26,
        },
        {
          id: 2,
          name: "李四",
          age: 23,
        },
        {
          id: 3,
          name: "王五",
          age: 28,
        },
      ],
      data2: [
        {
          id: 4,
          name: "赵六",
          age: 25,
        },
        {
          id: 5,
          name: "孙七",
          age: 24,
        },
      ],
      currentData: [],
      columns: [
        {
          title: "序号",
          field: "id",
        },
        {
          title: "姓名",
          field: "name",
        },
        {
          title: "年龄",
          field: "age",
        },
      ],
    };
  },
  methods: {
    handleClick() {
      if (this.currentData === this.data1) {
        this.currentData = this.data2;
      } else {
        this.currentData = this.data1;
      }
    },
  },
  mounted() {
    this.currentData = this.data1;
  },
};
</script>

在这个示例中，我们定义了两个不同的data数组，并将其作为DynamicDataExample组件的data属性。另外，我们也可以看到，我们通过一个按钮切换了渲染的数据源。

示例二：自定义单元格样式

除了渲染数据以外，我们还可以自定义表格的样式。例如，有时候我们需要为某些单元格设置特定的样式来突出它们的特殊性。我们可以封装一个Cell组件来达到这个效果：

<template>
  <td :class="classes">
    <slot></slot>
  </td>
</template>

<script>
export default {
  name: "Cell",
  props: {
    classes: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

<style scoped>
/* 样式 */
</style>

然后，在我们的Table组件中引入这个Cell组件，自定义想要的单元格样式：

<template>
  <div class="table">
    <table>
      <thead>
        <tr>
          <th v-for="column in columns" :key="column.field">
            {{ column.title }}
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="index">
          <cell
            v-for="column in columns"
            :key="column.field"
            :classes="[column.field === 'name' ? 'highlight' : '']"
          >
            {{ row[column.field] }}
          </cell>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Cell from "./Cell.vue";

export default {
  name: "Table",
  props: {
    columns: {
      type: Array,
      required: true
    },
    data: {
      type: Array,
      required: true
    }
  },
  components: {
    Cell,
  },
};
</script>

<style scoped>
.highlight {
  color: #f00;
}
</style>

在这个示例中，我们在Table组件中引入了Cell组件，并自定义了highlight样式。在渲染单元格的过程中，我们通过判断column.field的值，来将该单元格所在的列设置为highlight样式，这样就可以视觉上突出它了