element ui 的使用

安装

npm install element-ui -S

整体引入

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

table表格

<template>

  <div>

    <el-table :data="tableData" stripe style="width: 1070px; margin: 0 auto" :row-class-name="rouClassNameFn">
      <el-table-column width="180"> <template slot-scope="scope">{{ scope.$index + 1 }}</template></el-table-column>
      <el-table-column prop="al.name" width="180"> </el-table-column>
     
      <el-table-column>
        
        <template #default="{ row }">
          
          <el-button type="index" size="small" @click="play(row)">
          播放
            <audio></audio>
          </el-button>
          <el-button type="text" size="small" @click="tomuscinews(row)">详情
          </el-button>
          <el-button type="text" id="collect" size="small" @click="collect(row)"
            style="color: goldenrod; margin-left: 50px; font-size:20px;">☆</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>
</template>

<script>
import { searchurlApi, playlistApi } from "@/api";
import { mapState, mapMutations } from 'vuex'

export default {
  data() {
    return {

      playlist: this.$route.query.id,
      tableData: [],
      Url: "",
      loading: true
    };
  },
  computed: {
        ...mapState([ 'playListIndex','isBtnshow',])
    },
  methods: {
    play(row, event, column) {
      this.updatePlayList(this.tableData)
      console.log(this.tableData)
      console.log("播放", row);
      console.log('row.index',row.index)
      this.updateplayListIndext(row.index)

    },
    
    ...mapMutations(['updatePlayList', 'updateplayListIndext']),
     rouClassNameFn({ row, rowIndex }) {
      //把每一行的索引放进row
      row.index = rowIndex;
      // console.log(row.index)
    },
    tomuscinews(row) {

      console.log(123);
      this.$router.push({
        path: "/nonavlayout/muscinews",
        query: { id: row.id, picUrl: row.al.picUrl },

      });
    },
    collect(row) {
      console.log(123);
      console.log(row);
      localStorage.setItem('musicId', row.id)


    },
  },
  async created() {
    console.log("歌单列表");
    const res = await playlistApi({ id: this.playlist, limit: 20 });
    console.log("歌单列表");
    this.tableData = res.data.songs;
    console.log(res);
    console.log("歌单列表");
    // this.recomment = res.data.result;

  },

};
</script>
<style scoped>
.musicimg>img {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  border: 1px #333, solid;

}

.MusicList>div {
  float: left;
}
</style>