Vue3 ＜sript setup＞类 接口写法 笔记 数据展示例子

1.table列表：

<template>

<el-table :data="state.AdminData" style="width:100%; margin-top: -20px;" row-key="index">

      <el-table-column type="selection"  />

    <el-table-column type="index" prop="index" label="序号" sortable width="90px" />

    <el-table-column prop="nickname" label="姓名" width="150px" />

    <el-table-column prop="sex" label="性别" width="180px" sortable  />

</el-table>

</template>

<script lang="ts" setup>

2.先定义响应式数据reactive

const state = reactive({

/绑定table表的数据

  AdminData: [],

})

3.//table列表数据展示

const  AdminData = () =>{

  request.get('admin/selectAllAdmin').then(res=>{

   state.AdminData = res.data

  })

}

// 触发该方法

AdminData()

</script>