- 需求描述:默认显示编辑按钮,删除和上下移动按钮置灰并禁用;点击编辑之后,编辑按钮隐藏,展示添加和保存按钮,第一项的上移按钮和最后一项的下移按钮保持不变,其他操作按钮高亮,变为可操作;此类标签添加不可超过10个。
<template>
<div class="main-content">
<!-- 操作按钮 -->
<div class="marginTB10 fr">
<div v-if="!isEdit">
<el-button type="primary" icon="el-icon-edit" @click="isEdit = true">编辑</el-button>
</div>
<div v-else>
<el-button type="primary" icon="el-icon-plus" @click="handleAdd()">添加</el-button>
<el-button type="success" icon="el-icon-check" @click="handleSave()">保存</el-button>
</div>
</div>
<!-- table内容 -->
<el-table :header-cell-style="tableHeaderColor" border :data="tableData" :max-height="maxHeight" style="width: 100%;">
<el-table-column type="index" width="100" align="center" label="序号"></el-table-column>
<el-table-column property="content" align="center" label="用户"></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<p class="flex-se-c">
<el-button :disabled="isEdit ? false : true" type="text"><i @click="handleDel()" :class="[isEdit?'tableOptBtnY el-icon-delete':'tableOptBtnN el-icon-delete']"></i></el-button>
<el-button :disabled="!isEdit || scope.$index=== 0? true : false" type="text" @click="handleMoveUp(scope.$index,scope.row)"><i :class="[!isEdit||scope.$index=== 0?'tableOptBtnN el-icon-top':'tableOptBtnY el-icon-top']"></i></el-button>
<el-button :disabled="!isEdit || scope.$index===(tableData.length-1)? true : false" type="text" @click="handleMoveDown(scope.$index,scope.row)"><i :class="[!isEdit||scope.$index===(tableData.length-1)?'tableOptBtnN el-icon-bottom':'tableOptBtnY el-icon-bottom']"></i></el-button>
</p>
</template>
</el-table-column>
</el-table>
<!-- 添加标签弹窗 -->
<el-dialog title="添加标签" width="360px" :visible.sync="visible">
<main class="paddingLR20">
<div class="flex-c-c flex-nowrap">
<p>添加标签:</p>
<el-input v-model="submitForm.label" maxlength="5" show-word-limit></el-input>
</div>
<div class="paddingTB20 flex-e">
<el-button type="warning" @click="visible=false">取消</el-button>
<el-button type="primary" @click="handleSubmit()">提交</el-button>
</div>
</main>
</el-dialog>
</div>
</template>
- 说明:类名’tableOptBtnY’为操作按钮可操作时的样式;类名’tableOptBtnN’为操作按钮不可操作时的样式。(marginTB10,fr,flex-se-c,flex-c-c,flex-nowrap,paddingTB20,flex-e等公共样式就不做展示,如有萌新需要可以滴滴我)
import {
getstrategyCommentList } from "@/api/strategyMgt";
export default {
data() {
return {
isEdit: false, //是否是编辑状态
visible: false, //是否显示添加标签弹窗
tableData: [
{
content: "精选" },{
content: "周边" },{
content: "其他城市" },{
content: "精选" },{
content: "周边" },
{
content: "精选" },{
content: "精选" },{
content: "周边" },{
content: "周边" },{
content: "其他城市" },
], //table数据
submitForm: {
label: ""
}
};
},
created() {
this.getData()
},
computed: {
maxHeight() {
return `${
window.screen.availHeight - 220}px`;
}
},
methods: {
getData() {
// 获取当前表格数据
getstrategyCommentList().then(res => {
this.tableData = res.data
});
},
handleDel() {
}, // 删除操作
handleMoveUp(index,row){
// 标签上移
var _self = this;
if (index > 0) {
let upItem = _self.tableData[index - 1];
_self.tableData.splice(index - 1, 1);
_self.tableData.splice(index,0, upItem);
} else {
console.log("It's already the first one. It can't be moved up");
}
},
handleMoveDown(index,row){
// 标签下移
var _self = this;
if ((index + 1) === _self.tableData.length){
console.log("It's the last one. It can't be moved down");
} else {
let downItem = _self.tableData[index + 1];
_self.tableData.splice(index + 1, 1);
_self.tableData.splice(index,0, downItem);
}
},
handleAdd(){
// 点击添加按钮
if(this.tableData.length>=10){
this.$message.error('最多可添加10个热门搜索标签');
}else{
this.visible = true
}
},
handleSubmit() {
// 提交添加标签
// ......
this.visible = false;
},
handleSave() {
// 保存修改
// ......
this.isEdit = false;
},
tableHeaderColor({
row, column, rowIndex, columnIndex }) {
// 表头颜色
if (rowIndex === 0) {
return "background-color: #F7F9FC;color: black;font-weight: 600;";}
}
}
};
<style scoped>
.main-content {
padding: 0 5% 0 5%;
}
</style>