请用vue2跟element ui来封装树形列表组件，实现分页、过滤、排序、可行内编辑、列选择显隐、行选择批量操作、单元格填写验证等功能，要求封装的组件可通过配置复用

你可以使用Vue2和Element UI来封装树形列表组件，并实现分页、过滤、排序、可行内编辑、列选择显隐、行选择批量操作、单元格填写验证等功能。下面是一个简单的示例：

首先，你需要安装Vue2和Element UI，可以通过以下命令来安装：

npm install vue@2.6.14
npm install element-ui@2.15.1

然后，你可以创建一个名为`TreeTable`的组件，用于封装树形列表功能。在该组件中，你可以使用Element UI的Table和Tree组件来实现树形列表的功能。

<template>
  <div>
    <el-table :data="tableData" :default-sort="defaultSort" v-loading="loading" border>
      <el-table-column type="selection" v-if="selectionVisible"></el-table-column>
      <el-table-column v-for="column in columns" :key="column.prop" :prop="column.prop" :label="column.label" :sortable="column.sortable">
        <template v-if="column.editable">
          <el-table-column slot-scope="scope" :label="'Edit'">
            <template v-if="scope.row.editable">
              <el-input v-model="scope.row[column.prop]" placeholder="Input value"></el-input>
              <el-button @click="save(scope.row)">Save</el-button>
            </template>
            <template v-else>
              <el-button @click="edit(scope.row)">Edit</el-button>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-if="paginationVisible"
      :total="total"
      :current-page="currentPage"
      :page-size="pageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: 'TreeTable',
  props: {
    tableData: {
      type: Array,
      required: true
    },
    columns: {
      type: Array,
      required: true
    },
    paginationVisible: {
      type: Boolean,
      default: true
    },
    selectionVisible: {
      type: Boolean,
      default: true
    },
    defaultSort: {
      type: Object,
      default: () => {
        return {
          prop: '',
          order: ''
        }
      }
    }
  },
  data() {
    return {
      loading: false,
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSizeChange(size) {
      this.pageSize = size;
      this.loadData();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.loadData();
    },
    loadData() {
      // 在这里根据当前页码和每页显示数量，从后端获取数据，并更新tableData和total
    },
    edit(row) {
      row.editable = true;
    },
    save(row) {
      // 在这里保存编辑后的数据，并更新row.editable为false
    }
  },
  mounted() {
    this.loadData();
  }
}
</script>

在上面的示例中，`tableData`是树形列表的数据源，`columns`定义了表格的列配置。`paginationVisible`和`selectionVisible`用于控制是否显示分页和选择列。`defaultSort`用于设置默认的排序方式。

在`TreeTable`组件的`methods`中，`handleSizeChange`和`handleCurrentChange`方法分别监听分页组件的每页显示数量和当前页码的变化，并重新加载数据。`loadData`方法用于加载数据，在其中根据当前页码和每页显示数量，向后端发送请求获取数据，并更新`tableData`和`total`。

对于可行内编辑功能，我们在列配置中添加了`editable`字段，并使用`v-if`指令来判断当前行是否可编辑。当点击"Edit"按钮时，可以进入编辑状态，输入框可以输入值并点击"Save"按钮保存，保存后更新数据并退出编辑状态。

你可以根据实际需求对上述示例进行修改和扩展。希望能对你有所帮助！