在表格外部包一层div，设置div高度，el-table高度设置100%,动态计算div的高度
<div :style="{height:tableHeight}">
<el-table height="100%"></<el-table>
</div>
1.创建 tableMixin.js
export default {
computed: {
tableHeight() {
// 底部50 头部60 分页40 搜索栏50
// 获取滚动条高度（宽度）
let scrollBarHeight = this.getScrollbarWidth()
// 当屏幕宽度小于1600时候减去滚动条的高度
if (document.body.clientWidth < 1600) {
return `calc(100vh - 200px - ${scrollBarHeight}px)`
} else {
return "calc(100vh - 200px)"
}
},
},
methods: {
// 获取滚动条宽度
getScrollbarWidth() {
var odiv = document.createElement('div'),//创建一个div
styles = {
width: '100px',
height: '100px',
overflowY: 'scroll' //让div有滚动条
}, i, scrollbarWidth;
for (i in styles) odiv.style[i] = styles[i];
document.body.appendChild(odiv);//把div添加到body中
scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
console.log(odiv.offsetWidth)
console.log(odiv.clientWidth)
odiv.remove();//移除创建的div
return scrollbarWidth;//返回滚动条宽度
},
}
}
2.在页面引用
import tableMixin from "@/mixin/tableMixin";
export default {
mixins:[tableMixin],
}
全局汇入
//main.js
import tableMixin from "@/mixin/tableMixin";
Vue.mixin(tableMixin)
第二种方法
mixin/tableMixin.js
export default {
data() {
return { tableHeight: "", }
},
methods: {
// 获取滚动条宽度
getScrollbarWidth() {
var odiv = document.createElement('div'),//创建一个div
styles = {
width: '100px',
height: '100px',
overflowY: 'scroll' //让div有滚动条
}, i, scrollbarWidth;
for (i in styles) odiv.style[i] = styles[i];
document.body.appendChild(odiv);//把div添加到body中
scrollbarWidth = odiv.offsetWidth - odiv.clientWidth;//相减
odiv.remove();//移除创建的div
return scrollbarWidth;//返回滚动条宽度
},
getTableHeight() {
// 底部50 头部60 分页40 搜索栏50
let scrollBarHeight = this.getScrollbarWidth()
// 当屏幕宽度小于1600时候减去滚动条的高度
if (document.body.clientWidth < 960) {
this.tableHeight = `calc(100vh - 200px - ${scrollBarHeight}px)`
} else {
this.tableHeight = "calc(100vh - 200px)"
}
}
},
mounted() {
this.getTableHeight();
}
}
index.vue
<template>
<d2-container>
<!-- 新增按钮 -->
<div style="display:flex;justify-content: space-between;height:50px;align-items: center;">
<ul class="searchUL" style="marign-right: 300px">
<li v-for="(item, index) in searchButton" :key="index" @click="titleGoto(item)">
{{ item }}
</li>
</ul>
<div style="flex: 1;
display: flex;
justify-content: flex-end;
padding-right: 20px;">
<el-select style="width: 130px;margin-right: 15px;" v-model="formSearch.style" size="mini" clearable placeholder="选择风格" @change="getTableList(1)">
<el-option v-for="(item, index) in styleOutOptions" :key="index" :label="item.StyleNameCN" :value="item.ID">
</el-option>
</el-select>
<el-select style="width: 130px;margin-right: 15px;" v-model="formSearch.sex" size="mini" clearable placeholder="选择性别" @change="getTableList(1)">
<el-option v-for="(item, index) in sexOutOptions" :key="index" :label="item.GroupNameCN" :value="item.ID">
</el-option>
</el-select>
<el-select style="width: 130px;margin-right: 15px;" v-model="formSearch.cate" size="mini" clearable placeholder="选择品类" @change="getTableList(1)">
<el-option v-for="(item, index) in cateOutOptions" :key="index" :label="item.ProductName" :value="item.ProductID">
</el-option>
</el-select>
<el-input style="width: 230px;margin-right: 15px;" placeholder="项名称" @keyup.enter.native='getTableList(1)' v-model.trim="formSearch.searchText" size="mini" clearable>
<el-button slot="append" icon="el-icon-search" @click="getTableList(1)"></el-button>
</el-input>
</div>
</div>
<!-- 表格 -->
<el-table :height="tableHeight" v-loading="isLoading" element-loading-text="加载中，请稍后..." :data="tableData" border style="width: 100%" :header-cell-style="headFirst" ref="multipleTable" row-key="ID" :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
@selection-change="handleSelectionChange">
<el-table-column align="center" label="序号" min-width="30%">
<el-table-column type="selection" align="right"></el-table-column>
<el-table-column type="index" :index="indexMethod"> </el-table-column>
</el-table-column>
<el-table-column prop="ProdectStyleName" label="风格"></el-table-column>
<el-table-column prop="ProductGroupName" label="男/女/童装"></el-table-column>
<el-table-column prop="ProdectName" label="品类"></el-table-column>
<el-table-column prop="NameCN" label="中文名"></el-table-column>
<el-table-column prop="NameEN" label="英文名"></el-table-column>
<!-- <el-table-column prop="DisplayOrder" label="排序"></el-table-column> -->
<el-table-column label="操作">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="look(scope.row)" style="color: #666666">配置</el-button>
<span style="margin: 0px 5px">|</span>
<el-button type="text" size="mini" @click="edit(scope.row)" style="color: #666666">编辑</el-button>
<span style="margin: 0px 5px">|</span>
<el-button type="text" size="mini" @click="changeStus(scope.row)" style="color: #666666">{{ scope.row.IsNotEnable ? "启用" : "禁用" }}</el-button>
<span style="margin: 0px 5px">|</span>
<el-button type="text" size="mini" @click="labelSet(scope.row)" style="color: #666666">标签</el-button>
<span style="margin: 0px 5px" v-if="scope.row.FID === 0">|</span>
<el-button style="color: #666666" type="text" size="mini" @click="addSubItem(scope.row)" v-if="scope.row.FID === 0">新增子项</el-button>
<img class="moveupImg" v-show="
formSearch.style != '' ||
formSearch.sex != '' ||
formSearch.cate != ''
" src="../../pageManagement/moduleManagement/imgs/arrow-moveup-g.png" alt="" />
<img style="vertical-align: middle" v-show="
formSearch.style != '' ||
formSearch.sex != '' ||
formSearch.cate != ''
" src="../../pageManagement/moduleManagement/imgs/arrow-movedown-g.png" alt="" />
</template>
</el-table-column>
</el-table>
<!-- 弹出 -->
<el-dialog :title="'下单选项' + tip" :visible.sync="dialogVisible" :close-on-click-modal="false">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-row>
<el-col :span="interval">
<el-form-item label="风格" prop="style">
<el-select v-model="form.style" style="width: 100%" @change="selectStyle" :disabled="rowData !== ''">
<el-option v-for="(item, index) in styleOptions" :key="index" :label="item.StyleNameCN" :value="item.StyleID">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="interval">
<el-form-item label="性别" prop="sex">
<el-select v-model="form.sex" style="width: 100%" @change="selectSex" :disabled="rowData !== ''">
<el-option v-for="(item, index) in sexOptions" :key="index" :label="item.SexNameCN" :value="item.SexID">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="interval">
<el-form-item label="品类" prop="cate">
<el-select v-model="form.cate" style="width: 100%" :disabled="isAddSub">
<el-option v-for="(item, index) in cateOptions" :key="index" :label="item.ProdectNameCN" :value="item.ProdectID">
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="interval" v-if="isAddSub">
<el-form-item label="主项名称">
<el-input v-model="rowData.NameCN" style="width: 100%" disabled></el-input>
</el-form-item>
</el-col>
<el-col :span="interval">
<el-form-item label="中文名">
<el-input v-model="form.nameCN" style="width: 100%"></el-input>
</el-form-item>
</el-col>
<el-col :span="interval">
<el-form-item label="英文名">
<el-input v-model="form.nameEN" style="width: 100%"></el-input>
</el-form-item>
</el-col>
<!-- <el-col :span="20">
<el-form-item label="面辅料">
<el-radio-group v-model="form.isMian">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col> -->
<el-col :span="interval" v-if="showSenior">
<el-form-item label="高级设计">
<el-radio-group v-model="form.isSenior">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="是否必选">
<el-radio-group v-model="form.Isrequired">
<el-radio :label="true">是</el-radio>
<el-radio :label="false">否</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="排序">
<el-input v-model="form.sort" style="width: 23%"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<el-button class="baocun" @click="cancel" size="small" >取消</el-button>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<el-button class="baocun" @click="save" size="small" >保存</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
<!-- 弹出标签 -->
<el-dialog title="标签" :visible.sync="dialogTagVisible" :close-on-click-modal="false">
<el-form label-width="120px">
<el-row>
<el-col :span="12">
<el-form-item label="中文标签">
<el-input v-model="formTag.tagCN" placeholder="标签中文" style="width: 50%; margin-right: 10px"></el-input>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="英文标签">
<el-input v-model="formTag.tagEN" placeholder="标签英文" style="width: 50%; margin-right: 20px"></el-input>
<el-button type="primary" @click="addTag" size="small">新增标签</el-button>
</el-form-item>
</el-col>
<el-col :span="20">
<el-form-item label="当前标签">
<el-tag style="margin-right: 10px" v-for="(tag, index) in nowTags" :key="index" @close="closeTag(1, tag, index)" closable>
{{ tag.name }}
</el-tag>
</el-form-item>
</el-col>
<!-- <el-col :span="20">
<el-form-item label="已删除标签">
<el-tag
style="margin-right: 10px"
v-for="(tag, index) in deleteTags"
:key="index"
@close="closeTag(2, tag, index)"
closable>
{{tag.name}}
</el-tag>
</el-form-item>
</el-col> -->
<el-col :span="12">
<el-form-item>
<el-button type="primary" class="baocun"@click="cancelLabel" size="small">取消</el-button>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<el-button type="primary" class="baocun"@click="saveLabel" size="small">保存</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-dialog>
<!-- 分页 -->
<div class="pagination_wrap">
<span >已选{{checkNum}}项</span>
<el-pagination class="pagination" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[5 ,15, 20, 30, 40]"
:page-size="pageSize" :current-page="currentPage" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
</el-pagination>
</div>
</d2-container>
</template>
<script>
import log from "@/libs/util.log";
export default {
name: "systemsettings-orderoptions",
data() {
return {
isLoading:true,
checkNum: 0,
flag: true,
quanxuanClass: 0,
interval: 8, //弹出框显示每行显示两个元素
pageSize: 15,
currentPage: 1,
totalCount: 2,
dialogVisible: false,
dialogTagVisible: false,
styleOutOptions: [],
sexOutOptions: [],
cateOutOptions: [],
styleOptions: [],
sexOptions: [],
cateOptions: [],
tableData: [],
form: {
style: "",
sex: "",
cate: "",
nameCN: "",
nameEN: "",
// isMian: '',
isSenior: "",
sort: "0",
Isrequired:''
},
formSearch: {
style: "",
sex: "",
cate: "",
searchText: "",
},
searchButton: ["全选", "新增", "删除"],
formTag: {
tagCN: "",
tagEN: "",
},
nowTags: [], // 标签数组
deleteTags: [{ name: "H | H" }, { name: "E | E" }],
rules: {
style: [{ required: true, message: "请选择", trigger: "blur" }],
sex: [{ required: true, message: "请选择", trigger: "blur" }],
cate: [{ required: true, message: "请选择", trigger: "blur" }],
},
rowData: "", // 行数据
tip: "", // 弹窗提示
showSenior: false, // 弹窗显示高级设计选项
isAddSub: false, // 是否是新增子项
};
},
created(){
let _this = this;
document.onkeydown = function(e){
let key = window.event.keyCode;
if(key == 13){
_this.getTableList(1);
}
}
},
destroyed(){
document.onkeydown = null;
},
mounted() {
this.getTableList();
let _this = this;
window.onresize = function () {
_this.getTableHeight()
}
},
methods: {
indexMethod(index){
return (this.currentPage-1)*this.pageSize+index+1
},
//合并单元格
headFirst({ row, colunm, rowIndex, columnIndex }) {
if (rowIndex === 1) {
//这里为了是将第二列的表头隐藏，就形成了合并表头的效果
return { display: "none" };
}
return "background:#ebf1f6;font-size:14px;font-weight:bold;line-height:32px;text-align:center;borderColor:#cfd7e5;color:#666666"
},
cancel() {
this.dialogVisible = false;
},
// 获取列表
async getTableList(type) {
this.isLoading=true
this.currentPage = type === 1 ? 1 : this.currentPage;
let data = {
ProductStyleID: this.formSearch.style,
ProductGroupID: this.formSearch.sex,
ProductID: this.formSearch.cate,
gic: this.formSearch.searchText,
Page: {
currentIndex: this.currentPage,
pageSize: this.pageSize,
},
};
const result = await this.$request.getOrderOptionListData(data);
this.isLoading=false
this.tableData = result.StyleDesignList;
this.tableData.forEach((ele) => {
if (ele.StyleStyleDesign_FIDList) {
ele.children = ele.StyleStyleDesign_FIDList;
}
});
// 0是一级
// 子级数据 StyleStyleDesign_FIDList
// let children = [{ID:2,Name:'gaoaho'}]
// this.tableData.push()
// this.tableData.forEach(el=>{
// el.children = children
// })
this.totalCount = result.totalRowCount;
this.styleOutOptions = result.ProductStyleModelList; // 外部搜索选项
this.sexOutOptions = result.ProductGroupModelList;
this.cateOutOptions = result.ProductModelList;
this.styleOptions =
result.VProduct_MenuStyleResponse.Product_MenuStyleList; // 弹窗里的选项
},
// 新增按钮
add() {
this.dialogVisible = true;
this.showSenior = true;
this.isAddSub = false;
this.rowData = "";
this.tip = "-新增客户端左侧下单项";
this.form = {
style: "",
sex: "",
cate: "",
nameCN: "",
nameEN: "",
// isMian: false,
isSenior: false,
sort: "0",
};
},
// 添加右侧子项
addSubItem(row) {
this.interval = 12;
this.dialogVisible = true;
this.showSenior = false;
this.isAddSub = true;
this.rowData = row;
this.tip = "-新增客户端右侧下单项";
this.selectStyle(row.ProdectStyleID); // 性别选项赋值
this.selectSex(row.ProductGroupID); // 品类选项赋值
this.form.style = row.ProdectStyleID;
this.form.sex = row.ProductGroupID;
this.form.cate = row.ProdectID;
this.form.nameCN = "";
this.form.nameEN = "";
this.form.isSenior = false;
this.form.sort = "";
},
// 查看 进入二级项
look(row) {
// if (row.FID != 0) {
sessionStorage.setItem("orderOptionStyle", JSON.stringify(row));
this.$router.push({
name: "systemsettings-orderoptions-secondaryitem",
});
// } else {
// this.labelSet(row);
// }
},
// 编辑
edit(row) {
this.form.Isrequired = row.Isrequired
this.interval = 8;
this.dialogVisible = true;
this.showSenior = row.FID == 0;
this.isAddSub = false;
this.tip = `-修改客户端${row.FID == 0 ? "左" : "右"}侧下单项`;
this.rowData = row;
this.selectStyle(row.ProdectStyleID); // 性别选项赋值
this.selectSex(row.ProductGroupID); // 品类选项赋值
this.form.style = row.ProdectStyleID;
this.form.sex = row.ProductGroupID;
this.form.cate = row.ProdectID;
this.form.nameCN = row.NameCN;
this.form.nameEN = row.NameEN;
// this.form.isMian = row.IsFabrics
this.form.isSenior = row.IsAdvanced === 1;
this.form.sort = row.DisplayOrder;
},
// 启用 禁用
changeStus(row) {
this.$confirm(`此操作将${row.IsNotEnable ? "启用" : "禁用"}, 是否继续?`, {
type: "warning",
})
.then(async () => {
let data = {
StyleID: row.ID,
IsNotEnable: row.IsNotEnable,
};
const result = await this.$request.changeOrderOptionStatusData(data);
this.$message.success("修改成功");
this.getTableList(); // 刷新table
})
.catch(() => {});
},
// 全选事件
quanXuan() {
// 触发全选事件
if (this.quanxuanClass == 0) {
// 如果当前是没有全选点击之后变成全选1
this.quanxuanClass = 1;
this.tableData.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row, true);
});
} else if (this.quanxuanClass == 1) {
// 如果当前是全选的点击之后变不全选0
this.quanxuanClass = 0;
this.tableData.forEach((row) => {
this.$refs.multipleTable.toggleRowSelection(row, false);
});
}
},
// 操作
titleGoto(data) {
if (data == "全选") {
this.quanXuan();
} else if (data == "新增") {
// this.type = "新增";
// this.dialogVisible = true;
// var parameter = {
// Id: 0,
// };
// this.$request.getCustomerRuleModelById(parameter).then((res) => {
// this.CustomerTypeList = res.CustomerTypeList;
// this.CustomerLevelList = res.CustomerLevelList;
// this.GradingStandardList = res.GradingStandardList; //定级标准
// });
this.add();
} else if (data == "删除") {
// 批量删除
if (this.checkNum1 > 0) {
this.deleteNoticeListData();
} else {
this.$message({ type: "error", message: "请先勾选条目" });
}
}
},
// 取消标签弹窗
cancelLabel() {
this.dialogTagVisible = false;
},
saveLabel() {
this.dialogTagVisible = false;
},
// 弹出保存
save() {
this.$refs["form"].validate(async (valid) => {
if (valid) {
let data = {
AddType: this.isAddSub,
FID: this.isAddSub ? this.rowData.ID : 0,
StyleID: this.rowData && !this.isAddSub ? this.rowData.ID : "",
ProductStyleID: this.form.style,
ProductGroupID: this.form.sex,
ProductID: this.form.cate,
NameCN: this.form.nameCN,
NameEN: this.form.nameEN,
IsAdvanced: this.form.isSenior ? 1 : 0,
DisplayOrder: this.form.sort,
Isrequired:this.form.Isrequired,
IsFabrics:
this.form.nameCN === "面料" ||
this.form.nameCN === "里布" ||
this.form.nameCN === "纽扣",
};
const result = await this.$request.postOrderOptionData(data);
this.dialogVisible = false;
this.$message.success("保存成功");
this.getTableList(); // 刷列表
}
});
},
// 标签
async labelSet(row) {
this.dialogTagVisible = true;
this.rowData = row;
let data = {
DesigonID: row.ID,
};
const result = await this.$request.getOrderOptionTagData(data);
this.nowTags = result.V_LabelOptionList.map((item) => {
return {
ID: item.ID,
name: item.NameCN + " | " + item.NameEN,
};
});
// this.$router.push({ name: "systemsettings-hotstyle-styleorderoptions" });
},
// 新增标签
async addTag() {
if (this.formTag.tagCN && this.formTag.tagEN) {
// this.nowTags.push(
// {
// name: this.formTag.tagCN + ' | ' + this.formTag.tagEN
// }
// )
let data = {
DesigonID: this.rowData ? this.rowData.ID : "",
LableName: this.formTag.tagCN,
LableNameEN: this.formTag.tagEN,
};
const result = await this.$request.postOrderOptionTagData(data);
this.$message.success("新增成功");
this.labelSet(this.rowData);
this.formTag = {
tagCN: "",
tagEN: "",
};
} else {
this.$message.warning("请填写完整中英文");
}
},
// 删除现有标签
async closeTag(type, tag, index) {
if (type === 1) {
// 点当前
// this.nowTags.splice(index, 1)
let data = {
LableID: tag.ID,
};
const result = await this.$request.deleteOrderOptionTagData(data);
this.$message.success("删除成功");
this.labelSet(this.rowData);
}
// else if (type === 2) { // 点已删除
// this.deleteTags.splice(index, 1)
// this.nowTags.push(tag)
// }
},
// 选择风格是获取性别选项
selectStyle(e) {
this.sexOptions = this.styleOptions.find(
(a) => a.StyleID === e
).Product_MenuSexList;
},
// 选择性别时获取品类选项
selectSex(e) {
this.cateOptions = this.sexOptions
.find((a) => a.SexID === e)
.Product_MenuList.filter((a) => a.ProdectNameCN.indexOf("件套") == -1);
},
// 多选的数量
handleSelectionChange(val) {
this.checkNum = val.length;
},
// 换页数
handleCurrentChange(val) {
this.currentPage = val;
this.getTableList();
},
handleSizeChange(val) {
this.currentPage = 1;
this.pageSize = val;
this.getTableList();
},
},
};
</script>
<style scoped>
.el-table--border::after, .el-table--group::after, .el-table::before {
content: '';
position: absolute;
background-color: #cfd7e5 !important;
z-index: 1;
}
.btn {
background: white;
color: #409eff;
}
.searchUL li {
cursor: pointer;
padding-left: 0px;
list-style: none;
display: inline-block;
color: #606266;
font-size: 14px;
margin-right: 20px;
}
.searchUL li:hover {
color: #2f74ff;
}
.searchUL {
float: left;
margin: 0px;
flex-shrink: 0;
line-height: 28px;
padding-left: 20px;
}
.moveupImg {
vertical-align: middle;
margin-left: 5px;
margin-right: 5px;
}
</style>
网友评论