element-uitable里直接写数据

element-ui中uitable提供了直接写入数据的方法，可以通过在模板中使用el-table-column来直接渲染数据。这种方法十分方便，适用于数据较少或固定的情况。

使用这种方法时，可以在template标签中，使用el-table-column标签来渲染表格列，并在其中使用{{}}插值语法来显示数据。例如：

<template>
<el-table :data="tableData">
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="age" label="年龄"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>

其中，tableData是一个数组，包含多条数据，每条数据都有name、age、address这三个属性，prop属性用来指定要渲染的数据属性，这样在表格中就会显示这些属性对应的值了。

这种方法的优点是简单快捷，适用于数据不多的情况。但是缺点也很明显，一旦数据结构发生变化，就需要重新修改代码。因此，对于数据量大或者数据结构可能发生变化的情况，建议使用动态绑定数据的方法，这样可以实现更好的灵活性和扩展性。

相关问题

Element-ui table排序指定列不参与排序

要实现指定列不参与排序，可以在 Element UI 的表格组件中使用 `sort-method` 属性，并在排序方法中判断当前排序的列是否为指定列，如果是，则直接返回不排序的结果。例如，假设要指定第一列不参与排序，可以这样写：

<el-table :data="tableData" :columns="tableColumns" :sort-method="sortMethod"></el-table>

methods: {
  sortMethod(a, b, prop) {
    // 判断是否为第一列
    if (prop === 'column1') {
      return 0; // 返回不排序的结果
    }
    // 其他列按默认排序方法排序
    return a[prop].localeCompare(b[prop], 'zh-Hans-CN');
  }
}

在上面的代码中，`sort-method` 属性绑定了一个名为 `sortMethod` 的方法，该方法接收三个参数：要排序的两条数据 `a` 和 `b`，以及当前排序的列 `prop`。在方法中，首先判断当前排序的列是否为指定列，如果是，则直接返回不排序的结果。如果不是，则按照默认的排序方法排序，这里使用了 `localeCompare` 方法对中文进行排序。

element-ui封装---tableList

element-ui 是一个非常流行的 Vue.js 组件库，其中包含了许多常用的 UI 组件，例如表格、输入框等。针对表格组件，我们可以封装一个 tableList 组件来简化我们在使用 element-ui 表格组件时的代码编写。

首先，在 src/components 目录下创建 TableList.vue 文件，然后在该文件中编写如下代码：

<template>
  <div>
    <el-table :data="tableData" :row-key="rowKey" :height="height">
      <!-- 遍历 columns，自动生成列 -->
      <el-table-column v-for="column in columns" :key="column.prop" :label="column.label" :prop="column.prop">
        <!-- 自定义插槽 -->
        <template v-if="column.slot" slot-scope="scope">
          <slot :name="column.slot" v-bind="scope.row"></slot>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <el-pagination :current-page.sync="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
  </div>
</template>

<script>
export default {
  name: "TableList",
  props: {
    // 表格数据
    tableData: {
      type: Array,
      default: () => [],
    },
    // 表格列
    columns: {
      type: Array,
      default: () => [],
    },
    // 行标识符
    rowKey: {
      type: String,
      default: "id",
    },
    // 表格高度
    height: {
      type: Number,
      default: 0,
    },
    // 当前页码
    currentPage: {
      type: Number,
      default: 1,
    },
    // 每页条数
    pageSize: {
      type: Number,
      default: 10,
    },
    // 总条数
    total: {
      type: Number,
      default: 0,
    },
  },
  methods: {
    // 分页回调函数
    handleCurrentChange(val) {
      this.$emit("pagination", val);
    },
  },
};
</script>

该组件的功能包括：

1. 自动遍历 columns 数组，生成表格列。
2. 支持自定义插槽，例如用于渲染操作按钮等。
3. 集成了 element-ui 的分页组件，可以直接使用。
4. 父组件可以通过传递 props 来控制表格数据、表格列、行标识符、表格高度、当前页码、每页条数和总条数。
5. 父组件可以通过监听 pagination 事件来获取分页信息。

使用该组件时，只需要在父组件中引入 TableList 组件并传递必要的 props 即可，例如：

<template>
  <div>
    <table-list :table-data="tableData" :columns="tableColumns" :total="total" @pagination="handlePagination"></table-list>
  </div>
</template>

<script>
import TableList from "@/components/TableList.vue";

export default {
  name: "Example",
  components: {
    TableList,
  },
  data() {
    return {
      tableData: [],
      tableColumns: [
        { label: "姓名", prop: "name" },
        { label: "年龄", prop: "age" },
        { label: "性别", prop: "gender" },
        { label: "操作", slot: "operations" },
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10,
    };
  },
  methods: {
    handlePagination(val) {
      this.currentPage = val;
      // 重新获取数据
      // ...
    },
  },
};
</script>

以上代码中，我们通过传递 tableData、tableColumns 和 total 等 props 来控制 TableList 组件的显示。同时，监听了 pagination 事件，当分页信息变化时会触发 handlePagination 方法，我们在该方法中可以重新获取数据并更新表格显示。

这样，我们就可以通过封装 TableList 组件来简化我们在使用 element-ui 表格组件时的代码编写，提高我们的开发效率。