jcyjdt_web/src/views/homeIndex.vue

<template>
  <el-row>
    <el-col :span="24" class="main animate__animated animate__backInRight">
      <el-col :span="24" class="one">
        <el-table :data="list" border stripe style="width: 100%" @selection-change="toSelect">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" label="序号" align="center" width="80" />
          <el-table-column prop="dict_label" label="字典标签" align="center" show-overflow-tooltip sortable />
          <el-table-column prop="dict_value" label="字典键值" align="center" show-overflow-tooltip sortable />
          <el-table-column prop="dict_sort" label="字典排序" align="center" show-overflow-tooltip sortable />
          <el-table-column prop="status" label="状态" align="center" show-overflow-tooltip sortable />
          <el-table-column fixed="right" label="操作" width="100" align="center">
            <template #default>
              <el-button link type="primary" size="small">修改</el-button>
              <el-button link type="danger" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24" class="two">
        <cButton></cButton>
      </el-col>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
// 基础
import type { Ref } from 'vue'
// reactive, ref, onMounted
import { onMounted, ref } from 'vue'
// 接口
import { DictDataStore } from '@common/src/stores/users/sysdictdata'
import type { IQueryResult } from '@/util/types.util'
const testAxios = DictDataStore()
// 分页数据
const skip = 0
const limit = 10
const list: Ref<any[]> = ref([])
const total: Ref<number> = ref(0)
// 请求
onMounted(async () => {
  await search({ skip, limit })
})
const search = async (e: { skip: number; limit: number }) => {
  const info = { skip: e.skip, limit: e.limit }
  const res: IQueryResult = await testAxios.query(info)
  if (res.errcode == '0') {
    console.log(res.data)
    list.value = res.data as any[]
    total.value = res.total
  }
}
// 多选
const toSelect = (val: Array<[]>) => {
  console.log('多选')
  console.log(val)
}
</script>
<style scoped lang="less"></style>