插槽

  1. <template #status="{ text: status }">
  2.   <span>
  3.     <a-tag :color="status == '0' ? 'blue' : 'red'">{{ status == '0' ? '启用' : '停用' }}</a-tag>
  4.   </span>
  5. </template>

table 组件使用

  1. <template>
  2.   <a-table :data-source="userInfoData" :pagination="false" :columns="columns">
  3.     <template #status="{ text: status }">
  4.       <span>
  5.         <a-tag :color="status == '0' ? 'blue' : 'red'">{{ status == '0' ? '启用' : '停用' }}</a-tag>
  6.       </span>
  7.     </template>
  9.     <template #action="{ record }">
  10.       <span>
  11.         <a-button type="primary" danger>删除</a-button>
  12.         <a-button type="primary" @click="onEdit">编辑</a-button>
  13.         <a-button type="primary" danger>密码重置</a-button>
  14.         <a-button :type="record.status == '0' ? 'success' : 'danger'">{{
  15.           record.status == '0' ? '启用' : '停用'
  16.         }}</a-button>
  17.       </span>
  18.     </template>
  19.   </a-table>
  20. </template>
  22. <script lang="ts" setup>
  23.   import { storeToRefs } from 'pinia';
  24.   import { onBeforeMount } from 'vue';
  25.   import usePermissionManagementStore from '/@/store/modules/management';
  27.   const managementStore = usePermissionManagementStore();
  28.   const { userInfoData } = storeToRefs(managementStore);
  29.   const { onEdit, getUserInfoData } = managementStore;
  32.   /**
  33.    *table 属性类型定义
  34.    */
  35.   type ColumnType = {
  36.     title: string;
  37.     dataIndex: string;
  38.     key: string;
  39.     class?: string;
  40.     slots?: Object;
  41.     width?: number;
  42.     align?: 'center' | 'left' | 'right';
  43.     fixed?: 'left' | 'right';
  44.     slots?: Object;
  45.     filters?: {
  46.       text: string;
  47.       value: string;
  48.       children?: {
  49.         text: string;
  50.         value: string;
  51.       }[];
  52.     }[];
  53.     onFilter?: (value: string, record: ConceptData) => boolean;
  54.     sortDirections?: string[];
  55.     defaultSortOrder?: string;
  56.     filterMultiple?: string[] | boolean;
  57.     filterDropdownVisible?: boolean;
  58.   };
  61.   const columns: ColumnType[] = [
  62.     {
  63.       key: 'userid',
  64.       title: '序号',
  65.       dataIndex: 'userid',
  66.       width: 60,
  67.       fixed: 'right',
  68.     },
  69.     {
  70.       key: 'username',
  71.       title: '用户名',
  72.       dataIndex: 'username',
  73.       width: 60,
  74.     },
  75.     {
  76.       key: 'realname',
  77.       title: '真实姓名',
  78.       dataIndex: 'realname',
  79.       width: 60,
  80.     },
  81.     {
  82.       key: 'telephone',
  83.       title: '电话',
  84.       dataIndex: 'telephone',
  85.       width: 60,
  86.     },
  87.     {
  88.       key: 'status',
  89.       title: '状态',
  90.       dataIndex: 'status',
  91.       width: 60,
  92.       slots: { customRender: 'status' },
  93.     },
  94.     {
  95.       key: 'last_ip',
  96.       title: '最后登录IP',
  97.       dataIndex: 'last_ip',
  98.       width: 60,
  99.     },
  100.     {
  101.       key: 'last_login_time',
  102.       title: '最后登陆时间',
  103.       dataIndex: 'last_login_time',
  104.       width: 60,
  105.     },
  106.     {
  107.       key: 'action',
  108.       title: '操作',
  109.       dataIndex: 'action',
  110.       align: 'center',
  111.       width: 100,
  112.       slots: { customRender: 'action' },
  113.     },
  114.   ];
  116.   onBeforeMount(async () => {
  117.     await getUserInfoData();
  118.   });
  119. </script>

参考

【1】https://2x.antdv.com/docs/vue/introduce-cn