vue的一些笔记

记一次vue插槽

在Ant Design Vue的表格组件中，scopedSlots: { customRender: 'xxx' } 是用于连接列配置与模板插槽的关键配置，主要作用是为表格列提供灵活的自定义渲染能力。以下是具体解析：

---

核心作用

1. 建立插槽映射关系
   scopedSlots: { customRender: 'slotName' } 表示该列会使用名为 slotName 的作用域插槽来渲染内容。例如：

   { title: '标题', dataIndex: 'taskName', scopedSlots: { customRender: 'taskName' } }

   对应模板中的：

   <template #taskName="{ text, record }">
     <a-tag>{{ text }}</a-tag> <!-- 自定义渲染任务名称 -->
   </template>

2. 传递作用域数据
   插槽可通过 { text, record } 接收当前行的数据：

   • text: 当前单元格的值（对应 dataIndex 字段）
   • record: 整行数据对象

3. 优先级规则

   • 若同时存在 customRender 函数和 scopedSlots，customRender 优先级更高
   • 示例中的"序号"列直接使用 customRender 生成序号，无需插槽

---

实际应用场景

1. 复杂内容渲染
   如显示带图标的按钮、条件样式等：

   <template #status="{ text }">
     <a-badge :status="text === '成功' ? 'success' : 'error'" />
   </template>

2. 统一插槽复用
   多个列共享同一插槽（如示例中的 tooltip 插槽处理省略文本提示）

3. 动态交互控制
   在插槽内添加事件或表单控件（需注意JSX/Vue模板语法差异）

---

与普通插槽的区别

特性	scopedSlots	静态插槽
数据传递	可接收行数据 (text, record)	仅静态内容
灵活性	高（支持条件渲染、动态逻辑）	低
典型使用场景	表格列、列表项自定义渲染	固定结构的UI容器

---

注意事项

1. 命名一致性
   插槽名需与 scopedSlots.customRender 指定的名称完全匹配
2. Vue版本差异
   • Vue 2使用 slot-scope，Vue 3推荐 v-slot 语法
3. 性能优化
   大量自定义渲染时，建议避免在插槽内进行复杂计算

通过这种机制，Ant Design Vue实现了表格列的高可定制性，同时保持代码结构清晰。

记一次el-radio-group

<el-form-item label="评分">
  <el-radio-group v-model="score">
    <el-tooltip placement="top" v-for="item in scoreOptions" :key="item.value" :content="item.tip">
      <el-radio :label="item.value">{{ item.label }}</el-radio>
    </el-tooltip>
  </el-radio-group>
</el-form-item>

score: -1,
scoreOptions: [
  { value: 0, label: '0分', tip: '责任人的任务申请过延期或逾期完成的' },
  { value: 60, label: '60分', tip: '成果基本合格，存在可快速修复的，少于等于3个bug' },
  { value: 80, label: '80分', tip: '成果基本达成目标、符合预期，存在可快速修复的少于等于1个bug' },
  { value: 100, label: '100分', tip: '成果专业、精准，无错误，但无亮点' },
  { value: 120, label: '120分', tip: '提出的优化流程或创新方案，显著提升效率/效果，超预期完成任务' }
]