基于Element-Ui封装公共表格组件的详细图文步骤

下面我将为您详细讲解基于Element-Ui封装公共表格组件的具体步骤。

步骤一：准备工作

1. 安装 Element-Ui

npm install element-ui --save

2. 创建公共表格组件

在项目中创建一个名为 CommonTable.vue 的公共表格组件。

步骤二：组件属性设计

在 CommonTable.vue 中，定义组件的属性，用来接收父组件传递的数据。

<template>
  <el-table :data="tableData" :height="height">
    <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop"></el-table-column>
  </el-table>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    height: {
      type: Number,
      default: 0
    }
  },
}
</script>

在上述代码中，我们定义了三个属性：

• columns：表格列，数组类型，默认值为空数组
• tableData：表格数据，数组类型，默认值为空数组
• height：表格高度，数字类型，默认值为 0

步骤三：渲染表格

在 CommonTable.vue 中，使用 el-table 和 el-table-column 渲染表格。

<template>
  <el-table :data="tableData" :height="height">
    <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop"></el-table-column>
  </el-table>
</template>

在上述代码中，我们使用了 v-for 循环渲染表格列，每一列对应一个 el-table-column 组件。

步骤四：使用公共表格组件

在父组件中，引入和使用 CommonTable 组件。

<template>
  <div>
    <common-table :columns="columns" :tableData="tableData" :height="height"></common-table>
  </div>
</template>

<script>
import CommonTable from './CommonTable.vue'

export default {
  components: {
    CommonTable
  },
  data() {
    return {
      columns: [
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '年龄',
          prop: 'age'
        },
        {
          label: '性别',
          prop: 'gender'
        }
      ],
      tableData: [
        {
          name: '张三',
          age: 18,
          gender: '男'
        },
        {
          name: '李四',
          age: 20,
          gender: '女'
        },
        {
          name: '王五',
          age: 22,
          gender: '男'
        }
      ],
      height: 200
    }
  }
}
</script>

在上述代码中，我们引入了 CommonTable 组件，并使用 columns、tableData 和 height 三个属性传递表格数据。同时，我们在 data 中定义了实际的表格数据。

示例说明一： 自定义表头样式

在 CommonTable.vue 中，可以通过 slot 来自定义表头样式。具体示例如下：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop">
      <template slot="header">
        <div class="header-wrapper">
          <span class="header-title">{{column.label}}</span>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<style>
.header-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-title {
  margin-left: 10px;
}
</style>

在上述代码中，我们为表头添加了一个 slot，用于自定义表头样式。同时，我们在 style 中定义了自定义样式。

示例说明二：搜索功能

在 CommonTable.vue 中，可以通过 watch 属性监测组件的变化，并对表格数据进行搜索。具体示例如下：

<template>
  <div>
    <el-input v-model="searchText" placeholder="请输入搜索关键字" clearable />
    <el-table :data="filteredData">
      <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop"></el-table-column>
    </el-table>
 </div>
</template>

<script>
export default {
  props: {
    columns: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      searchText: ''
    }
  },
  computed: {
    filteredData() {
      return this.tableData.filter(data => {
        return this.columns.some(column => {
          if (column.filterable) {
            return data[column.prop].toLowerCase().indexOf(this.searchText.toLowerCase()) > -1
          } else {
            return true
          }
        })
      })
    }
  },
  watch: {
    searchText(val) {
      this.$nextTick(() => {
        if (this.$refs.table) {
          this.$refs.table.filter(val)
        }
      })
    }
  }
}
</script>

在上述代码中，我们在 data 中定义了名为 searchText 的属性，用于接收用户输入的搜索关键字。同时，我们使用 computed 计算属性，对表格数据进行搜索。我们将 searchText 转换为小写字母，并使用 indexOf 方法判断当前行的某一列是否包含搜索关键字。

接着，在 watch 属性中监测 searchText 的变化，使用 $refs 获取 el-table 组件的实例，并调用 filter 方法对表格数据进行过滤。

至此，我们已经完成了基于 Element-Ui 封装公共表格组件的详细图文步骤。