<template>
<section>
<!--工具条-->
<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
<el-form :inline="true">
<el-form-item>
<el-input v-model="keyword" placeholder="关键字"></el-input>
</el-form-item>
<el-form-item>
<el-button type="warning" @click="keywordQuery">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="handleAdd">新增</el-button>
</el-form-item>
</el-form>
</el-col>
<!--列表v-loading="l
istLoading"-->
<el-table :data="tableDatas" v-loading="l
istLoading" @selection-change="handleSelectionChange" highlight-current-row
style="width: 100%;">
<!--多选框-->
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column type="index" width="70" label="序号">
</el-table-column>
<el-table-column prop="typeName" label="文章类型" width="120">
</el-table-column>
<el-table-column prop="status" label="类型状态" width="120">
<template slot-scope="scope">
<div v-if="scope
.row
.status == 1" style="color: green">可用</div>
<div v-if="scope
.row
.status == 0" style="color: green">不可用</div>
</template>
</el-table-column>
<el-table-column prop="createTime" label="创建时间" width="150">
</el-table-column>
<el-table-column prop="updateTime" label="修改时间" width="200">
</el-table-column>
<el-table-column prop="pname" label="父级类型" width="300" show-overflow-tooltip>
</el-table-column>
<el-table-column label="操作">
<template scope="scope">
<el-button size="small" @click="handleEdit(scope
.row)">编辑</el-button>
<el-button type="danger" size="small" @click="handleDel(scope
.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<!--工具条-->
<el-col :span="24" class="toolbar">
<el-button type="danger" :d
isabled="
this.sels
.length === 0" @click="handlePatchDel">批量删除</el-button>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
:page-sizes="[5, 10, 15]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
:total="totals" style="float:right;">
</el-pagination>
</el-col>
<!--添加或修改界面-->
<el-dialog title="保存用户" :v
isible
.sync="saveFormV
isible" :close-on-click-modal="false">
<el-form :model="saveForm" label-width="80px" :rules="saveFormRules" ref="saveForm">
<el-form-item label="类型名称" prop="typeName">
<el-input v-model="saveForm
.typeName" auto-complete="off"></el-input>
</el-form-item>
<el-form-item label="是否启用">
<el-switch v-model="saveForm
.status"
:active-value="1"
:inactive-value="0"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
</el-form-item>
<el-form-item label="父级" >
<el-cascader v-model="saveForm
.parentId"
:
options="
options"
:props="{ checkStrictly: true,value:'id',label:'typeName'}"
clearable></el-cascader>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click
.native="saveFormV
isible = false">取消</el-button>
<el-button type="primary" @click
.native="saveSubmit">提交</el-button>
</div>
</el-dialog>
</section>
</template>
<script>
export default {
data() {
return {
options: [],//层级目录
//1
.分页查询相关数据
totals: 0,//总记录条数
currentPage: 1,//当前页,要传递到后台的
pageSize: 5, //每页显示多少条
tableDatas: [], //当前页数据
l
istLoading: false,
//2
.高级查询相关数据
keyword: '',
//3
.删除相关数据
//4
.批量删除相关数据
sels: [], //存储多选记录
//5
.添加和修改相关数据
saveFormV
isible: false,
saveForm: {
id:"",
typeName:"",
status:"1",
createTime:"",
updateTime:"",
parentId:"",
},
//6
.添加和修改校验规则-表单项校验
saveFormRules: {
typeName: [
{ required: true, message: '请输入类型名称', trigger: 'blur' }
]
},
}
},
methods: {
//1
.分页查询相关方法
//1
.1
.获取列表数据
getTableData() {
let _
this =
this
let param = {
page:_
this.currentPage,
size:_
this.pageSize,
keyword:_
this.keyword
}
_
this.$http
.post("/articleType/l
ist",param)
.then(res=>{
let {code,success,msg,data} = res
.data
if(success){
_
this.tableDatas = data
.l
ist
_
this.totals = data
.total
}else {
_
this.$message
.error(msg);
}
})
},
//1
.2
.选择第几页时触发
handleCurrentChange(curentPage) {
this.currentPage = curentPage;
this.getTableData();
},
//1
.3
.选择每页显示记录条数时触发
handleSizeChange(pageSize) {
this.pageSize = pageSize;
this.getTableData();
},
//2
.高级查询相关方法
keywordQuery() {
this.currentPage=1;
this.getTableData();
},
//3
.删除相关方法
handleDel(row) {
},
//4
.批量删除相关方法
//4
.1
.选项改变时触发
handleSelectionChange(val) {
},
//4
.2
.批量删除
handlePatchDel() {
let _
this =
this;
},
handleAdd() {
this.saveFormV
isible = true;
this.saveForm = {
status: 1, // 默认启用
parentId: null, // 清空父级选择
typeName: "" // 清空类型名称
};
},
handleEdit(row) {
},
saveSubmit() {
let _
this=
this;
this.$refs['saveForm']
.validate(valid => {
if (valid) {
var saveForm = _
this.saveForm;
saveForm
.parentId = saveForm
.parentId[saveForm
.parentId
.length-1];
this.$http
.post("/articleType",saveForm)
.then(res=> {
let {code, success, msg, data} = res
.data;
if (success) {
//关闭模态框
this.saveFormV
isible = false;
_
this.$message
.success("操作成功");
//重写加载数据
_
this.getTableData()
_
this.getTree()
} else {
_
this.$message
.error(msg);
}
})
}else {
console
.log('2');
return false;
}
})
},
getTree(){
let _
this=
this;
this.$http
.get("/articleType/getTree")
.then(res=> {
_
this.options = res
.data
.data
})
}
},
mounted() {
this.getTableData();
this.getTree();
}
}
</script>
新增的提交按钮报错
本文介绍了一段用于实现三级联动下拉菜单的代码，在Chrome浏览器中出现问题的原因及解决方案。作者发现该代码在Chrome中无法正常工作，但在IE中正常。通过调试，将“this.options.value”更改为“this.value”解决了此问题。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
