智能返回拦截

组件会自动拦截返回事件，请尽情的使用浏览器返回键，当出现多个c-table时也会按预期正常工作。

1.模拟页面模式

请尝试点击新增，而后点击浏览器返回试试效果

共 1 条

• 1

10 条/页前往

<template>
  <c-table :option="option" @load="handleLoad"></c-table>
</template>
<script setup lang="ts">
import { ref } from 'vue'

const option = {
  menuProps: {
    width: 220
  },
  columns: [
    {
      name: '姓名',
      prop: 'fullName'
    },
    {
      name: '性别',
      prop: 'gender',
      type: 'radio',
      dicData: ['男', '女']
    },
    {
      name: '年龄',
      prop: 'age',
      type: 'number'
    }
  ]
}
const data = ref([
  {
    fullName: '张三',
    gender: '男',
    age: 28
  }
])
const handleLoad = (params: any, done: Function) => {
  done({
    total: data.value.length,
    records: data.value
  })
}
</script>

显示代码复制代码复制代码

2.主动返回

当c-table处于例如查看状态时，可通过vue-router.back()或window.history.back()使其回到表格状态

共 1 条

• 1

10 条/页前往

<template>
  <c-table :option="option" :before="handleBefore" @load="handleLoad"> </c-table>
</template>
<script setup lang="ts">
import { Notification } from '@arco-design/web-vue'
import { ref } from 'vue'

const option = {
  menuProps: {
    width: 220
  },
  dialog: true,
  columns: [
    {
      name: '姓名',
      prop: 'fullName'
    },
    {
      name: '性别',
      prop: 'gender',
      type: 'radio',
      dicData: ['男', '女']
    },
    {
      name: '年龄',
      prop: 'age',
      type: 'number'
    }
  ]
}
const data = ref([
  {
    fullName: '张三',
    gender: '男',
    age: 28
  }
])
const handleLoad = (params: any, done: Function) => {
  done({
    total: data.value.length,
    records: data.value
  })
}
// eslint-disable-next-line no-unused-vars
const handleBefore = (type: string, record: any, done: Function) => {
  done()
  Notification.success('2秒后将自动返回表格状态')

  setTimeout(() => {
    window.history.back()
  }, 2000)
}
</script>

显示代码复制代码复制代码