dataease/frontend/src/views/panel/enshrine/index.vue

<template>
  <div>
    <el-table

      class="de-filter-data-table"
      :data="starDatas"
      :show-header="false"
      :highlight-current-row="true"
      style="width: 100%"
    >
      <el-table-column prop="name" :label="$t('commons.name')">
        <template :id="scope.row.storeId" slot-scope="scope">
          <div class="start-item">
            <div class="filter-db-row star-item-content" @click="showPanel(scope.row)">
              <i class="el-icon-s-data" />
              <span> {{ scope.row.name }}</span>
            </div>
            <div class="star-item-close">
              <i class="el-icon-close " @click="remove(scope.row)" />
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { deleteEnshrine, enshrineList } from '@/api/panel/enshrine'
import { uuid } from 'vue-uuid'
import { get } from '@/api/panel/panel'
export default {
  name: 'Enshrine',
  data() {
    return {
      starDatas: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    showPanel(row) {
      get('panel/group/findOne/' + row.panelGroupId).then(response => {
        this.$store.commit('setComponentData', this.resetID(JSON.parse(response.data.panelData)))
        this.$store.commit('setCanvasStyle', JSON.parse(response.data.panelStyle))
        const data = {
          id: row.panelGroupId,
          name: row.name
        }
        this.$store.dispatch('panel/setPanelInfo', data)
      })
    },
    resetID(data) {
      if( data ) {
        data.forEach(item => {
          item.id = uuid.v1()
        })
      }

      return data
    },
    remove(row) {
      deleteEnshrine(row.storeId).then(res => {
        this.initData()
      })
    },
    initData() {
      enshrineList({}).then(res => {
        this.starDatas = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.start-item {
    width: 100%;
    height: 25px;
    margin: 0 0 0 10px;
}
.star-item-content {
    width: calc(100% - 60px);
    position: absolute;
}
.star-item-close {
    width: 25px;
    right: 5px;
    position: absolute;
    display: none;
}
.start-item:hover {
    .star-item-close {
        display: block;
    }
}
</style>