native-ui+vue实现带排序分页的table表格效果代码-html代码-BFW代码库

native-ui+vue实现带排序分页的table表格效果代码

代码语言：html

所属分类：表格

代码描述：native-ui+vue实现带排序分页的table表格效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue3.2.22.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/naive-ui@2.34.4.js"></script>
  </head>
  <body>
    <div id="app">
      <n-data-table
    :columns="columns"
    :data="data"
    :pagination="pagination"
    @update:sorter="handleUpdateSorter"
  />
    </div>
    <script>

    const { ref, computed } =Vue;

const data = [
  {
    key: 0,
    name: 'John Brown',
    age: 32,
    chinese: 98,
    math: 60,
    english: 70
  },
  {
    key: 1,
    name: 'Jim Green',
    age: 42,
    chinese: 98,
    math: 66,
    english: 89
  },
  {
    key: 2,
    name: 'Joe Black',
    age: 32,
    chinese: 98,
    math: 66,
    english: 89
  },
  {
    key: 3,
    name: 'Jim Red',
    age: 32,
    chinese: 88,
    math: 99,
    english: 89
  }
]


      const App = {
          setup(){
           const sortStatesRef = ref([])
    const sortKeyMapOrderRef = computed(() =>
      sortStatesRef.value.reduce((result, { columnKey, order }) => {
        result[columnKey] = order
        return result
      }, {})
    )
    const paginationRef = ref({ pageSize: 5 })

    const columnsRef = computed(() => [
      {
        title: .........完整代码请登录后点击上方下载按钮下载查看