colexiu-project/src/views/student-info/my-score/index.tsx

import { ElTabPane, ElTabs } from 'element-plus'
import { defineComponent } from 'vue'
import AlbumList from './album-list'
import styles from './index.module.less'
import List from './list'

export default defineComponent({
  name: 'live-class',
  data() {
    return {
      activeName: 'ALBUM'
    }
  },
  methods: {
    getList() {}
  },
  render() {
    return (
      <div class={[styles.myScore, 'relative']}>
        <ElTabs v-model={this.activeName}>
          <ElTabPane label="我的乐谱" name="MYSCORE">
            {this.activeName === 'MYSCORE' && <List auditStatus="MYSCORE" />}
          </ElTabPane>
          <ElTabPane label="收藏乐谱" name="COLLECTION">
            {this.activeName === 'COLLECTION' && (
              <List auditStatus="COLLECTION" />
            )}
          </ElTabPane>
          <ElTabPane label="收藏专辑" name="ALBUM">
            {this.activeName === 'ALBUM' && <AlbumList />}
          </ElTabPane>
        </ElTabs>
      </div>
    )
  }
})