将操作列的封装的vue+elementUI组件

2023-11-11 22:06:31

在开发过程中，我们经常需要在表格中添加操作列，以便对表格中的数据进行编辑、查看、上传下载等操作。这些操作列通常需要根据不同的需求进行定制，因此开发起来比较麻烦。为了解决这个问题，我们可以封装一个vue+elementUI的组件，专门用于处理操作列。

这个组件可以接受一个数组参数，数组中包含了操作列的配置信息。每个配置信息包括操作列的名称、类型、处理函数等。组件内部会根据配置信息自动生成操作列的模板和样式。当组件被渲染到页面上时，它会自动调用相应的处理函数来执行操作。

这样一来，我们只需要在组件的外部传入操作列的配置信息，就可以轻松地实现操作列的定制。这种方法不仅提高了代码的可复用性和易维护性，而且还简化了开发流程。

下面是一个vue+elementUI的组件示例，它可以用于封装操作列：

<template>
  <el-table-column :width="width" :label="label">
    <template v-slot:default="scope">
      <el-button @click="edit(scope.row)">编辑</el-button>
      <el-button @click="view(scope.row)">查看</el-button>
      <el-button @click="upload(scope.row)">上传</el-button>
      <el-button @click="download(scope.row)">下载</el-button>
    </template>
  </el-table-column>
</template>

<script>
export default {
  props: {
    width: {
      type: String,
      default: '150px'
    },
    label: {
      type: String,
      default: '操作'
    },
  },
  methods: {
    edit(row) {
      // 编辑操作
    },
    view(row) {
      // 查看操作
    },
    upload(row) {
      // 上传操作
    },
    download(row) {
      // 下载操作
    }
  }
}
</script>

我们可以通过如下方式使用这个组件：

<template>
  <el-table :data="data">
    <operation-column />
  </el-table>
</template>

<script>
import OperationColumn from './components/OperationColumn.vue'

export default {
  data() {
    return {
      data: [
        { id: 1, name: 'John Doe', age: 30 },
        { id: 2, name: 'Jane Smith', age: 25 },
        { id: 3, name: 'Michael Jones', age: 40 }
      ]
    }
  },
  components: {
    OperationColumn
  }
}
</script>