mirror of
https://gitee.com/chu1204505056/vue-admin-beautiful.git
synced 2025-04-06 03:58:00 +08:00
88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<template>
|
||
<el-card shadow="hover">
|
||
<template #header>
|
||
<vab-icon icon="send-plane-2-line" />
|
||
计划
|
||
<el-tag class="card-header-tag" type="success">
|
||
祝用框架的小伙伴都能住上别墅，开上保时捷
|
||
</el-tag>
|
||
</template>
|
||
<el-table :data="tableData" row-key="title" height="283px">
|
||
<el-table-column align="center" label="拖拽" width="50px">
|
||
<template #default="{}">
|
||
<vab-icon
|
||
style="cursor: pointer"
|
||
:icon="['fas', 'arrows-alt']"
|
||
></vab-icon>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column width="20px" />
|
||
<el-table-column prop="title" label="目标" width="230px" />
|
||
<el-table-column label="进度" width="220px">
|
||
<template #default="{ row }">
|
||
<el-progress :percentage="row.percentage" :color="row.color" />
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column width="50px" />
|
||
<el-table-column prop="endTIme" label="完成时间" />
|
||
</el-table>
|
||
</el-card>
|
||
</template>
|
||
<script>
|
||
import Sortable from 'sortablejs'
|
||
export default {
|
||
data() {
|
||
return {
|
||
tableData: [
|
||
{
|
||
title: '帮助中小企业盈利1个亿',
|
||
endTIme: '2099-12-31',
|
||
percentage: 50,
|
||
color: '#95de64',
|
||
},
|
||
{
|
||
title: '帮助10万个人',
|
||
endTIme: '2029-12-31',
|
||
percentage: 8,
|
||
color: '#69c0ff',
|
||
},
|
||
{
|
||
title: '交个帅气的男朋友',
|
||
endTIme: '2021-12-31',
|
||
percentage: 76,
|
||
color: '#1890FF',
|
||
},
|
||
{
|
||
title: 'vue-admin-beautiful标星过1K',
|
||
endTIme: '2020-03-31',
|
||
percentage: 100,
|
||
color: '#ffc069',
|
||
},
|
||
{
|
||
title: '活到老，学到老',
|
||
endTIme: '2094-12-16',
|
||
percentage: 25,
|
||
color: '#5cdbd3',
|
||
},
|
||
{
|
||
title: '变成像尤雨溪一样优秀的人',
|
||
endTIme: '此生无望',
|
||
percentage: 1,
|
||
color: '#b37feb',
|
||
},
|
||
],
|
||
}
|
||
},
|
||
mounted() {
|
||
const tbody = document.querySelector('.el-table__body-wrapper tbody')
|
||
const _this = this
|
||
Sortable.create(tbody, {
|
||
onEnd({ newIndex, oldIndex }) {
|
||
const currRow = _this.tableData.splice(oldIndex, 1)[0]
|
||
_this.tableData.splice(newIndex, 0, currRow)
|
||
},
|
||
})
|
||
},
|
||
}
|
||
</script>
|