element ui穿梭框加层级描述

要在Element UI的穿梭框中加入层级描述，可以使用穿梭框的 slot-scope 属性和自定义模板的方式来实现。具体步骤如下：

1. 在穿梭框中添加左侧和右侧的 slot-scope 属性，分别命名为 left-footer 和 right-footer。

<el-transfer
  v-model="value"
  :data="data"
  :titles="titles"
  :filterable="filterable"
  :props="props"
  :left-footer="leftFooter"
  :right-footer="rightFooter">
</el-transfer>

2. 在 data 数组中添加一个层级字段，用于描述数据的层级结构。

data: [{
  key: 1,
  label: '选项1',
  level: 1
}, {
  key: 2,
  label: '选项2',
  level: 2
}, {
  key: 3,
  label: '选项3',
  level: 2
}]

3. 在 left-footer 和 right-footer 模板中，通过 v-for 指令遍历数据，并根据层级字段来添加不同的缩进。

data() {
  return {
    leftFooter(h) {
      return (
        <div>
          <span>左侧列表</span>
          <hr style="margin: 10px 0;" />
          <div>
            {
              this.data.map(item => {
                if (item.level === 1) {
                  return <div>{item.label}</div>
                } else {
                  return <div style="padding-left: 20px;">{item.label}</div>
                }
              })
            }
          </div>
        </div>
      )
    },
    rightFooter(h) {
      return (
        <div>
          <span>右侧列表</span>
          <hr style="margin: 10px 0;" />
          <div>
            {
              this.data.map(item => {
                if (item.level === 1) {
                  return <div>{item.label}</div>
                } else {
                  return <div style="padding-left: 20px;">{item.label}</div>
                }
              })
            }
          </div>
        </div>
      )
    }
  }
}

4. 最后，根据实际需求调整缩进的样式即可。

这样就可以在Element UI的穿梭框中加入层级描述了。