VUE element-ui实现表格动态展示、动态删减列、动态排序、动态搜索条件配置、表单组件化。

以下是一个使用Vue和Element UI创建的简化版本的示例代码，展示了如何实现表格的动态列显示、删除、排序和搜索功能。

<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column
        v-for="column in dynamicColumns"
        :key="column.prop"
        :prop="column.prop"
        :label="column.label"
        :sortable="column.sortable"
      ></el-table-column>
    </el-table>
 
    <el-button @click="addColumn">添加列</el-button>
    <el-button @click="removeColumn">删除列</el-button>
    <el-button @click="sortTable">排序</el-button>
    <el-input v-model="search" placeholder="搜索内容"></el-input>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tableData: [
        // 数据示例
        { date: '2016-05-02', name: 'Tom', address: 'No.189, Grove St, Los Angeles' },
        // ...更多数据
      ],
      dynamicColumns: [
        // 初始列配置
        { label: '日期', prop: 'date', sortable: true },
        { label: '姓名', prop: 'name', sortable: false },
      ],
      search: '', // 搜索条件
    };
  },
  methods: {
    addColumn() {
      // 添加列逻辑
      const newColumn = { label: '地址', prop: 'address', sortable: false };
      this.dynamicColumns.push(newColumn);
    },
    removeColumn() {
      // 删除列逻辑
      this.dynamicColumns = this.dynamicColumns.filter(column => column.prop !== 'address');
    },
    sortTable() {
      // 排序逻辑
      this.tableData.sort((a, b) => a.date.localeCompare(b.date));
    },
  },
};
</script>

这段代码展示了如何动态地向表格中添加、删除列，以及如何对表格数据进行排序。搜索功能可以通过计算属性和Vue的响应式系统来实现，但在这个简化的例子中，我们只包括了基本的动态特性。