restructure/src/views/system/user/index.vue

<template>
  <div>
    <n-card>
      <data-table
        :columns="data.columns"
        :data="data.data"
        :pagination="data.pagination"
        :row-key="(row) => row.id"
        :request="loadDataTable"
        size="large"
        scroll-x="1200"
      >
        <template #tableTitle>
          <n-button type="primary"> 新建 </n-button>
          <n-button type="primary"> 删除 </n-button>
        </template>
      </data-table>
    </n-card>
  </div>
</template>

<script>
import dataTable from '@/components/DataTable/index.vue'
import TableAction from '@/components/DataTable/tools/Action.vue'
import TableImage from '@/components/DataTable/tools/Image.vue'
import { getUserList } from '@/api/system/user/index.js'
import { h, onMounted, unref } from 'vue'
import { reactive } from 'vue'
export default {
  name: 'MenuPage',
  components: { dataTable },
  setup() {
    const data = reactive({
      columns: [
        {
          title: '用户编号',
          key: 'code',
          align: 'center'
        },
        {
          title: '头像',
          key: 'avatar',
          align: 'center',
          render(row) {
            return h(TableImage, {
              images: {
                width: 36,
                height: 36,
                src: row.avatar
              }
            })
          }
        },
        {
          title: '用户账号',
          key: 'username',
          align: 'center'
        },
        {
          title: '用户姓名',
          key: 'realname',
          align: 'center'
        },
        {
          title: '用户类型',
          key: 'type',
          align: 'center',
          width: 100
        },
        {
          title: '角色',
          key: 'roles',
          align: 'center'
        },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          width: 100
        },
        {
          title: '部门',
          key: 'deptName',
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'createTime',
          align: 'center',
          width: 160
        },
        {
          title: '更新时间',
          key: 'updateTime',
          align: 'center',
          width: 160
        },
        {
          title: '操作',
          align: 'center',
          width: 150,
          fixed: 'right',
          render(row) {
            return h(TableAction, {
              actions: [
                {
                  label: '添加',
                  type: 'button',
                  props: {
                    type: 'primary',
                    onClick: play.bind(null, row)
                  },
                  auth: 'basic_list'
                },
                {
                  label: '修改',
                  auth: 'basic_list'
                },
                {
                  label: '删除',
                  type: 'popconfirm',
                  auth: 'basic_list'
                }
              ],
              align: 'center'
            })
          }
        }
      ],
      data: [],
      pagination: {
        pageSize: 10
      }
    })

    function play(row) {
      console.log(row)
    }

    /**
     * @description: 获取用户数据
     * @return {*}
     */
    async function fetchList() {
      const params = {
        page: 1,
        limit: 10
      }
      const res = await getUserList(params)
      data.data = res.data.list
    }

    const params = reactive({
      name: 'xiaoMa'
    })

    const loadDataTable = async(res) => {
      const _params = {
        ...unref(params),
        ...res
      }
      return await getUserList(_params)
    }
    onMounted(() => {
      fetchList()
    })

    return { data, loadDataTable }
  }
}
</script>
<style scoped lang='scss'>
.n-button + .n-button {
  margin-left: 10px;
}
</style>