iview中table翻页时候添加loading状态

您可以通过监听 `page-change` 事件，在翻页时添加 loading 状态。具体实现方法如下：

1. 在 `<i-table>` 组件上添加 `@page-change` 事件监听器，并在方法中添加 loading 状态：

<i-table @page-change="handlePageChange"></i-table>

methods: {
  handlePageChange(current) {
    this.loading = true;
    // 翻页逻辑
    // ...
    this.loading = false;
  }
}

2. 在 `data` 中添加 `loading` 状态：

data() {
  return {
    loading: false,
    // ...
  }
}

3. 在 `<i-table>` 组件上添加 `:loading` 属性，将 `loading` 状态与表格 loading 状态绑定：

<i-table :loading="loading"></i-table>

这样，当您翻页时，表格会显示 loading 状态，直到数据加载完成后才会取消 loading 状态。

相关问题

iview中table清除选中项

在 iView 中，要清除表格（Table）中的选中项，可以通过以下步骤进行操作：

1. 首先，你需要在表格的数据源中添加一个 `selected` 属性来表示是否被选中。例如，如果你的数据源是一个数组，可以为每个数组项添加一个 `selected` 属性，默认值为 `false`。

2. 在表格的模板中，使用 `row-selection` 属性来启用行选择功能，并将 `selected` 属性绑定到数据源中的 `selected` 属性。例如：

<Table :data="tableData" :row-selection="{
  selected: tableData.filter(item => item.selected),
  onChange: handleSelectionChange
}">
  <Table-column type="selection" width="60"></Table-column>
  <Table-column prop="name" label="Name"></Table-column>
  <Table-column prop="age" label="Age"></Table-column>
</Table>

3. 在你的方法中，实现 `handleSelectionChange` 方法来处理选中项的变化。例如，你可以将选中的行存储到一个变量中，并在需要清除选中项的时候将该变量清空。例如：

data() {
  return {
    tableData: [
      { name: 'John', age: 20, selected: false },
      { name: 'Jane', age: 25, selected: false },
      { name: 'Tom', age: 30, selected: false }
    ],
    selectedRows: []
  };
},
methods: {
  handleSelectionChange(selection) {
    this.selectedRows = selection;
  },
  clearSelection() {
    this.selectedRows = [];
  }
}

4. 最后，当你想要清除选中项时，调用 `clearSelection` 方法即可。例如，可以在某个按钮的点击事件中调用该方法。

<Button @click="clearSelection">Clear Selection</Button>

通过以上步骤，你可以在 iView 中清除表格的选中项。希望对你有帮助！

iview中table用ref清除选中项

在 iView 中，可以使用 ref 来获取 Table 组件的实例，并通过该实例的方法进行清除选中项的操作。以下是一个示例代码：

<template>
  <div>
    <Button @click="clearSelection">清除选中项</Button>
    <Table ref="myTable" :data="tableData" @on-selection-change="handleSelectionChange">
      <!-- 表格列配置 -->
    </Table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
    };
  },
  methods: {
    handleSelectionChange(selection) {
      // 处理选中项的变化
    },
    clearSelection() {
      this.$refs.myTable.clearSelection();
    },
  },
};
</script>

在上述代码中，通过 ref="myTable" 获取到 Table 组件的实例，并在 clearSelection 方法中调用 this.$refs.myTable.clearSelection() 来清除选中项。

注意：需要确保 Table 组件已经加载完毕，才能调用 clearSelection 方法。可以在 mounted 钩子函数中进行相关操作，以确保 Table 组件已经渲染完成。