List 列表 ​

<template>
  <w-radio-group v-model="size">
    <w-radio value="large">Large</w-radio>
    <w-radio value="default">Default</w-radio>
    <w-radio value="small">Small</w-radio>
    <w-radio value="mini">Mini</w-radio>
  </w-radio-group>
  <div class="mb-8 mt-8 flex gap-8">
    <w-switch
      v-model="config.split"
      active-text="Split"
      inactive-text="No split"
    />
    <w-switch
      v-model="config.border"
      active-text="Border"
      inactive-text="No border"
    />
  </div>
  <div class="flex gap-8">
    <w-list
      class="flex-1"
      :size="size"
      :split="config.split"
      :border="config.border"
      footer="footer"
    >
      <template #header>
        <div>Header</div>
      </template>
      <w-list-item>安徽省第二附属医院</w-list-item>
      <w-list-item>安徽省合肥市蜀山区</w-list-item>
      <w-list-item>张生</w-list-item>
      <w-list-item>30岁</w-list-item>
      <w-list-item>男</w-list-item>
    </w-list>
    <w-list
      class="flex-1"
      :size="size"
      :split="config.split"
      :border="config.border"
    >
      <w-list-item>安徽省第二附属医院</w-list-item>
      <w-list-item>安徽省合肥市蜀山区</w-list-item>
      <w-list-item>张生</w-list-item>
      <w-list-item>30岁</w-list-item>
      <w-list-item>男</w-list-item>
    </w-list>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const config = ref({
  split: true,
  border: true,
})

const size = ref('default')
</script>

<style scoped></style>

<template>
  <w-list split>
    <template #header>
      <div>会诊</div>
    </template>
    <w-list-item>
      <w-list-item-meta
        avatar="https://avatars.githubusercontent.com/u/37531008?s=40&v=4"
        title="会诊目的"
        description="协助拟定治疗及手术方案  |  需要科室协助帮忙确定本患者的治疗解决方案，辛苦各位主任"
      />
      <template #action>
        <w-button type="primary" text>分享</w-button>
        <w-button type="primary" text>下载</w-button>
      </template>
    </w-list-item>
    <w-list-item>
      <w-list-item-meta
        avatar="https://avatars.githubusercontent.com/u/37531008?s=40&v=4"
        title="会诊目的"
        description="协助拟定治疗及手术方案  |  需要科室协助帮忙确定本患者的治疗解决方案，辛苦各位主任"
      />
      <template #action>
        <w-button type="primary" text>分享</w-button>
        <w-button type="primary" text>下载</w-button>
      </template>
    </w-list-item>
    <w-list-item>
      <w-list-item-meta
        avatar="https://avatars.githubusercontent.com/u/37531008?s=40&v=4"
        title="会诊目的"
        description="协助拟定治疗及手术方案  |  需要科室协助帮忙确定本患者的治疗解决方案，辛苦各位主任"
      />
      <template #action>
        <w-button type="primary" text>分享</w-button>
        <w-button type="primary" text>下载</w-button>
      </template>
    </w-list-item>
  </w-list>
</template>

<template>
  <w-list border split>
    <template #header>
      <div>Header</div>
    </template>
    <w-list-item>安徽省第二附属医院</w-list-item>
    <w-list-item stripe>安徽省合肥市蜀山区</w-list-item>
    <w-list-item>张生</w-list-item>
    <w-list-item stripe>30岁</w-list-item>
    <w-list-item>男</w-list-item>
  </w-list>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const config = ref({
  split: true,
  border: true,
})

const size = ref('default')
</script>

<style scoped></style>