el-table 按某一数值属性 升序排序
:default-sort = “{ prop: ‘unitSort’, order: ‘descending’}”
<el-table
ref="unitTable"
:data="tableData"
:default-sort = "{ prop: 'unitSort', order: 'ascending'}"
>
<el-table-column
type="index"
label="序号">
</el-table-column>
<el-table-column
prop="unitSort"
label="完成单位排序"
>
</el-table>
若依draggable
<template>
<div class="bodyRight">
<div class="bodyRightTitle">
<div><span>标签池</span></div>
<div><a-button type="primary">导入Excel</a-button></div>
</div>
<div class="bodyRightLabel">
<a-spin :spinning="isLoading">
<!-- ***.下面是第四步 -->
<draggable
v-model="tagsList"
class="bodyRightdraggable"
@sort="onDraggableUpdate"
animation="300"
chosenClass="chosen"
>
<transition-group v-for="item in tagsList" :key="item.value">
<a-tag
class="tabs"
:key="item.value"
@close="deleteTag(item)"
style="margin-bottom: 5px"
@dblclick="handleDblClick(item)"
>
<span class="a-select__tags-text tagname" v-if="!item.isEditName">
<CEllipsis :length="8" :tooltip="true">
{{ item.label }}
</CEllipsis>
<div title="删除"><a-icon type="close" @click.stop="removeLabel(item)" /></div>
</span>
<a-input
v-else
:ref="'input_' + item.value"
v-model="item.label"
:maxLength="22"
@pressEnter="sumbitLabel(item)"
placeholder="请输入标签名称"
@blur="sumbitLabel(item)"
></a-input>
</a-tag>
</transition-group>
</draggable>
</a-spin>
</div>
</div>
</template>
<script>
//第一步 ***.引入组件
import draggable from 'vuedraggable'
export default {
components: {
draggable, //***.第二步
},
data() {
return {
tagsList: [],
treeClass: '',
classList: [],
checkedCategoryKeys: [],
categoryTree: [],
defaultProps: {
children: 'subGroupList',
title: 'groupName',
key: 'groupCode',
},
eventSelectedNode: null,
isLoading: false,
}
},
created() {
this.load_init()
},
methods: {
//拖拽动作 ***.第三步 拖拽完成事件
onDraggableUpdate(e) {
this.isLoading = true
setTimeout(() => {
this.isLoading = false
//老位置
const oldIndex = e.oldIndex
//新位置
const newIndex = e.newIndex
const newSort = this.tagsList[e.newIndex].sort
this.tagsList[e.newIndex].sort = this.tagsList[e.oldIndex].sort
this.tagsList[e.oldIndex].sort = newSort
console.log(this.tagsList)
this.$message.success('顺序变更成功!')
}, 1000)
},
//初始化
load_init() {
for (let index = 0; index < 98; index++) {
this.classList.push({
value: 'val' + index,
label: '树层级_' + index,
})
this.tagsList.push({
value: 'val' + index,
label: '树层级_' + index,
//是否编辑
isEditName: false,
//排序
sort: index,
//loading
isLoading: false,
})
}
},
},
}
</script>
<style lang="scss" scoped>
.bodyRight {
width: 65%;
height: 100%;
.bodyRightTitle {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
line-height: 18px;
}
.bodyRightLabel {
width: 100%;
height: 90%;
overflow-y: auto;
border: 2px solid #d9d9d9;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-content: flex-start;
.bodyRightdraggable {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.tabs {
width: 125px;
height: 35px;
border: 1px dashed #ccc;
border-radius: 25px;
font-size: 16px;
align-items: center;
display: flex;
cursor: pointer;
.tagname {
width: 100%;
display: flex;
justify-content: space-between;
}
i {
display: none;
}
&:hover {
i {
font-size: 16px;
color: red;
display: inline-block;
}
}
}
//***.第五步 样式
.chosen {
.tabs {
border: 1px solid #1890ff;
background-color: #fff !important;
color: #1890ff;
cursor: move;
}
}
}
}
</style>
若依登录界面透明
<style rel="stylesheet/scss" lang="scss">
.login {
// display: flex;
justify-content: center;
align-items: center;
height: 100%;
background-image: url("../assets/images/background.jpeg");
background-size: cover;
}
.title {
margin: 0px auto 20px auto;
text-align: center;
color: #0f0d0d;
font-size: 24px;
}
.login-form {
border-radius: 6px;
// background: #ffffff;
background-color: rgba(255, 255, 255, 0.25); /* 透明度为0.7的白色背景 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
position: absolute;
bottom: 15%;
right: 4%;
width: 400px;
padding: 25px 25px 5px 25px;
.el-input {
height: 38px;
input {
height: 38px;
}
}
.input-icon {
height: 39px;
width: 14px;
margin-left: 2px;
}
}
.login-tip {
font-size: 13px;
text-align: center;
color: #bfbfbf;
}
.login-code {
width: 33%;
height: 38px;
float: right;
img {
cursor: pointer;
vertical-align: middle;
}
}
.el-login-footer {
height: 40px;
line-height: 40px;
position: fixed;
bottom: 0;
width: 100%;
text-align: center;
color: #fff;
font-family: Arial;
font-size: 12px;
letter-spacing: 1px;
}
.login-code-img {
height: 38px;
}
</style>