vue + element动态多表头与动态插槽

“vue + element动态多表头与动态插槽”的攻略如下：

1. 动态多表头

动态多表头的实现需要借助element-ui的<el-table-column>组件的嵌套。具体实现步骤如下：

1. 在vue的data中定义动态表头的数据，包括每个表头的名称、宽度等信息，可以使用一个数组来存储。

data() {
  return {
    tableHeaderData: [
      {
        label: '列1',
        width: 100,
        children: [
          {
            label: '子列1',
            width: 100
          },
          {
            label: '子列2',
            width: 100
          }
        ]
      },
      {
        label: '列2',
        width: 100,
        children: [
          {
            label: '子列3',
            width: 100
          },
          {
            label: '子列4',
            width: 100
          }
        ]
      }
    ]
  }
},

1. 在表格中添加<el-table-column>组件，使用v-for指令循环渲染表头的数据。在渲染每个表头时，如果它有子表头，则需要递归地渲染子表头。

<el-table :data="tableData">
  <el-table-column v-for="header in tableHeaderData" :key="header.label" :label="header.label" :width="header.width">
    <template v-if="header.children" slot-scope="{row}">
      <el-table-column v-for="child in header.children" :key="child.label" :label="child.label" :width="child.width">
      </el-table-column>
    </template>
  </el-table-column>
</el-table>

1. 注意，<el-table>组件的data属性需要绑定表格数据，这里使用了一个名为tableData的数组。

示例：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="header in tableHeaderData" :key="header.label" :label="header.label" :width="header.width">
      <template slot="header">
        {{ header.label }}
      </template>
      <template v-if="header.children" slot-scope="{row}">
        <el-table-column v-for="child in header.children" :key="child.label" :label="child.label" :width="child.width">
        </el-table-column>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableHeaderData: [
        {
          label: '列1',
          width: 100,
          children: [
            {
              label: '子列1',
              width: 100
            },
            {
              label: '子列2',
              width: 100
            }
          ]
        },
        {
          label: '列2',
          width: 100,
          children: [
            {
              label: '子列3',
              width: 100
            },
            {
              label: '子列4',
              width: 100
            }
          ]
        }
      ],
      tableData: [
        {
          col1: 'row1-col1',
          subcol1: 'row1-subcol1',
          subcol2: 'row1-subcol2',
          col2: 'row1-col2',
          subcol3: 'row1-subcol3',
          subcol4: 'row1-subcol4'
        },
        {
          col1: 'row2-col1',
          subcol1: 'row2-subcol1',
          subcol2: 'row2-subcol2',
          col2: 'row2-col2',
          subcol3: 'row2-subcol3',
          subcol4: 'row2-subcol4'
        }
      ]
    }
  }
}
</script>

2. 动态插槽

动态插槽的实现需要使用vue的<component>组件，具体步骤如下：

1. 在vue的data中定义多种数据类型的模板（template），可以使用一个对象来存储。

data() {
  return {
    templates: {
      text: '<span>{{ row.text }}</span>',
      number: '<span>{{ row.number }}</span>',
      bool: '<i :class="{ fa: true, \'fa-check\': row.bool, \'fa-times\': !row.bool }"></i>'
    },
    tableData: [
      { text: 'text1', number: 1, bool: true },
      { text: 'text2', number: 2, bool: false }
    ]
  }
},

1. 在表格中添加<el-table-column>组件，使用v-for指令循环渲染列的数据。在渲染每个列时，可以根据该列的数据类型来动态决定使用哪个模板。

<el-table :data="tableData">
  <el-table-column v-for="column in columns" :key="column.key" :label="column.label" :prop="column.key">
    <template slot-scope="{row}">
      <component :is="'template-' + column.type" :row="row" />
    </template>
  </el-table-column>
</el-table>

1. 注意，这里使用了一个自定义组件<component>，它的is属性可以动态绑定组件的名称，这里使用了"template-" + column.type来动态绑定模板的名称。另外，在组件中使用了单文件组件、计算属性等vue特性来编写模板。

示例：

<template>
  <el-table :data="tableData">
    <el-table-column v-for="column in columns" :key="column.key" :label="column.label" :prop="column.key">
      <template slot-scope="{row}">
        <component :is="'template-' + column.type" :row="row" />
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      templates: {
        text: '<span>{{ row.text }}</span>',
        number: '<span>{{ row.number }}</span>',
        bool: '<i :class="{ fa: true, \'fa-check\': row.bool, \'fa-times\': !row.bool }"></i>'
      },
      columns: [
        { key: 'text', label: 'Title', type: 'text' },
        { key: 'number', label: 'Number', type: 'number' },
        { key: 'bool', label: 'Boolean', type: 'bool' },
      ],
      tableData: [
        { text: 'text1', number: 1, bool: true },
        { text: 'text2', number: 2, bool: false }
      ]
    }
  },
  components: {
    'template-text': {
      props: ['row'],
      template: '<span>{{ row.text }}</span>'
    },
    'template-number': {
      props: ['row'],
      template: '<span>{{ row.number }}</span>'
    },
    'template-bool': {
      props: ['row'],
      computed: {
        iconClass() {
          return {
            fa: true,
            'fa-check': this.row.bool,
            'fa-times': !this.row.bool
          }
        }
      },
      template: '<i :class="iconClass"></i>'
    }
  }
}
</script>