vue+elementUI 通用模板组件form+button+table

在Vue中，你可以创建一个通用组件来封装表单（Form）、按钮（Button）和表格（Table）。以下是一个简单的示例：

1. 创建一个新的Vue组件，例如GenericList.vue。
2. 在组件内部，使用ElementUI的el-form、el-button和el-table组件来构建通用模板。

<template>
  <div>
    <el-form :inline="true" :model="form">
      <el-form-item label="关键词">
        <el-input v-model="form.keyword" placeholder="请输入关键词"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData">
      <el-table-column prop="date" label="日期" width="180"></el-table-column>
      <el-table-column prop="name" label="姓名" width="180"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
      <!-- 其他需要的列 -->
    </el-table>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        keyword: ''
      },
      tableData: [
        // 初始数据
      ]
    };
  },
  methods: {
    onSearch() {
      // 执行搜索操作
      console.log('搜索关键词:', this.form.keyword);
    }
  }
};
</script>

3. 在父组件中引入并使用GenericList组件。

<template>
  <div>
    <generic-list></generic-list>
  </div>
</template>
 
<script>
import GenericList from './components/GenericList.vue';
 
export default {
  components: {
    GenericList
  }
};
</script>

这样，你就创建了一个通用的表单、按钮和表格组件，可以在多个页面中复用。你可以根据实际需求对GenericList组件进行进一步的定制化，比如添加更多的表单项、表格列或者按钮事件。