vue table 里面 slot 的模板复用 slot-scope template v-for

vue table 里面 slot 的模板复用 slot-scope template v-for

需求

经常在table里面要有自定义列，但是会有相同的自定义列，这个时候又不想写很多一样的template，就可以用这种方式

代码

<template :slot="slotName" v-for="slotName in [
      'slotName1',
      'slotName2',
      'slotName3',
      'slotName4'
      ]" slot-scope="{row, index}">
        <AutoTipZen :key="slotName" :iTitle="row[slotName]">{{ toLine(row[slotName]) }}</AutoTipZen>
      </template>

代码转配置

刚才那个数组可以从columns的数组里面获取

<template 
:slot="slotName" 
v-for="slotName in columns.filter(item => item.slotType === 'autoTip').map(item => item.slot)" 
slot-scope="{row, index}">

后记正式代码

<template :slot="slotName"
                v-for="slotName in columns.filter(m => m.slotType === 'textarea').map(m => m.slot)"
                slot-scope="{row, index}">
        <AutoTipZen :key="slotName" :iTitle="row[slotName]">{{ toLine(row[slotName]) }}</AutoTipZen>
      </template>

columns数组

[
  {
    title: 'fieldName',
    slot: 'slotName',
    slotType: 'textarea'
  },
  {
    title: 'fieldName2',
    slot: 'slotName2',
    slotType: 'textarea'
  },
]

函数

toLine (txt) {
      return txt.replace(/\r/g, '').replace(/\n/g, '')
    },

总结

原理基本上是这个意思，就拆分了业务逻辑，并且可以组合使用。