如何封装Vue Element的table表格组件

接下来我来详细讲解如何封装Vue Element的table表格组件的完整攻略。

步骤一：新建一个Vue组件

首先，我们需要新建一个Vue组件，并引入Element的table组件。我们可以使用如下的代码来完成这个步骤：

<template>
  <el-table
    :data="tableData"
    :columns="tableColumns"
    class="table"
    v-loading="loading">
  </el-table>
</template>

<script>
import { Table } from 'element-ui'
export default {
  components: { Table },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

在代码中，我们使用<template>标签来定义组件的模板，并引入了Element的table组件。在<el-table>标签中，我们使用了props来接收传递过来的数据、字段和状态。

步骤二：渲染表格列

我们可以使用如下代码来渲染表格的列：

const tableColumns = [
  {
    label: '列1',
    prop: 'col1',
    width: '100'
  },
  {
    label: '列2',
    prop: 'col2',
    width: '200'
  }
]

在代码中，我们定义了两列，包括“列1”和“列2”，并分别为它们设置了“prop”和“width”的属性。

步骤三：渲染表格数据

我们可以使用如下代码来渲染表格的数据：

const tableData = [
  {
    col1: '第1列文本',
    col2: '第1列文本'
  },
  {
    col1: '第2列文本',
    col2: '第2列文本'
  }
]

在代码中，我们定义了两行数据，分别包括“第1列文本”和“第2列文本”。

步骤四：使用封装的组件

接下来，我们只需要在需要使用表格的地方导入、注册并使用我们刚才封装好的组件即可。

<template>
  <my-table
    :table-data="tableData"
    :table-columns="tableColumns"
    :loading="loading">
  </my-table>
</template>

<script>
import MyTable from './components/MyTable'
export default {
  components: { MyTable },
  data () {
    return {
      tableData: [
        {
          col1: '第1列文本',
          col2: '第1列文本'
        },
        {
          col1: '第2列文本',
          col2: '第2列文本'
        }
      ],
      tableColumns: [
        {
          label: '列1',
          prop: 'col1',
          width: '100'
        },
        {
          label: '列2',
          prop: 'col2',
          width: '200'
        }
      ],
      loading: false
    }
  }
}
</script>

在代码中，我们导入并注册了我们封装的表格组件，然后在<my-table>标签中传递表格所需的数据和状态。

示例说明

示例一：给表格添加自定义操作列

我们可以在封装的组件中添加一个“操作”列，来实现对表格中的数据执行一些自定义操作。

<template>
  <el-table
    :data="tableData"
    :columns="tableColumns"
    class="table"
    v-loading="loading">
    <template slot-scope="{ row }">
      <el-button @click="handleAction(row)">操作</el-button>
    </template>
  </el-table>
</template>

<script>
import { Table, Button } from 'element-ui'
export default {
  components: { Table, Button },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleAction (row) {
      console.log(`执行自定义操作：${row.col1}`)
    }
  }
}
</script>

在代码中，我们使用了Element的Button组件，并添加了自定义方法来处理操作行为。

示例二：实现表格的多选

我们可以在封装的组件中添加一个多选框，来实现对表格中的数据进行多选。

<template>
  <el-table
    :data="tableData"
    :columns="tableColumns"
    class="table"
    v-loading="loading"
    :row-selection="{selection: selectedRows, onSelect: handleRowSelect}">
  </el-table>
</template>

<script>
import { Table } from 'element-ui'
export default {
  components: { Table },
  props: {
    tableData: {
      type: Array,
      default: () => []
    },
    tableColumns: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selectedRows: []
    }
  },
  methods: {
    handleRowSelect (rows) {
      this.selectedRows = rows
    }
  }
}
</script>

在代码中，我们添加了<el-table>标签的row-selection属性，并定义了处理选中行的回调方法。

好了，这就是封装Vue Element的table表格组件的完整攻略。希望对你有帮助。