Vue实现多级联动(扁平数组转树形数组)cascader
目录Vue扁平数组转树形数组实现多级联动，数据库数据存储表如下图所示：扁平数组转树形数组公共方法搭建界面HTML代码JS代码注解：Vue扁平数组转树形数组实现多级联动，数据库数据存储表如下图所示： 从上面数据，我们如何转化数据实现多级联动，如下图所示效果: 扁平数组转树形数组公共方法 //论坛分类 扁平数组转树形数组...
·
目录
Vue扁平数组转树形数组实现多级联动，数据库数据存储表如下图所示：
Vue扁平数组转树形数组实现多级联动，数据库数据存储表如下图所示：
从上面数据，我们如何转化数据实现多级联动，如下图所示效果:
扁平数组转树形数组公共方法
//论坛分类 扁平数组转树形数组
Vue.prototype.forumTreeData = function (froum) {
for (let i in froum) {
froum[i].value = froum[i].fc_id;
froum[i].label = froum[i].fc_name;
}
let temp = {};
let ans = [];
for (let i in froum) {
temp[froum[i].value] = froum[i];
}
for (let i in temp) {
if (temp[i].fc_fid != 0) {
if (!temp[temp[i].fc_fid].children) {
temp[temp[i].fc_fid].children = [];
}
temp[temp[i].fc_fid].children.push(temp[i]);
} else {
ans.push(temp[i]);
}
}
return ans;
}
搭建界面HTML代码
<template>
<div>
<Form :model="formItem" ref="formItem" :rules="ruleInline" :label-width="100" lable-position="left">
<FormItem label="选择分类 : " prop="value1">
<Cascader :data="forumData" change-on-select v-model="formItem.value1" class="input_width"></Cascader>
</FormItem>
<FormItem label="标签名称 : " prop="fc_name">
<Input v-model="formItem.fc_name" size="large" placeholder="请输入标签名称" class="input_width"></Input>
</FormItem>
<FormItem label="问题描述 : " prop="fc_desc">
<Input v-model="formItem.fc_desc" type="textarea" :rows="4" style="width:400px;"
placeholder="请输入问题描述"></Input>
</FormItem>
<FormItem label="论坛分类logo : ">
<div class="uploadBox" prop="fc_icon">
<input type="file" @change="doUpload" ref="inputFile"/>
<Icon type="ios-plus-empty" class="uploadIcon"></Icon>
<div class="imagePreview" v-show="categoryLogoIsShow">
<img :src="formItem.fc_icon" @click="$refs.inputFile.click()"/>
</div>
</div>
<div v-show="categoryLogoIsShow" style="text-align: left;">
<Icon type="information-circled"></Icon>
可点击图片重新选择
</div>
</FormItem>
<FormItem>
<Button type="primary" size="large" :loading="submit_loading" @click="submit('formItem')">提交</Button>
<Button type="error" size="large" @click="handleDelete" style="margin-left: 8px;">删除</Button>
</FormItem>
</Form>
<Modal v-model="deleteModel" width="260">
<p slot="header" style="color:#f60;text-align:center">
<Icon type="information-circled"></Icon>
<span>删除确认</span>
</p>
<div style="text-align:center">
<p>删除后数据不可恢复,确定要这么做吗?</p>
</div>
<div slot="footer">
<Button type="error" size="large" long :loading="delete_loading" @click="deleteForum">确定删除</Button>
</div>
</Modal>
</div>
</template>
JS代码
<script type="text/ecmascript-6">
export default {
mounted() {
this.getForumData();
this.getData();
},
methods: {
/**
* 删除论坛分类数据
*/
deleteForum() {
this.delete_loading = true;
var url = this.ServerIp + this.API.forumDeleteCategory;
var that = this;
var params = {};
params.fc_id = this.$route.query.fc_id;
this.$http({
method: 'post',
url: url,
data: params
}).then((res) => {
this.delete_loading = false;
this.deleteModel = false;
if (res.data.success) {
that.$router.go(-1);
} else {
that.$Message.error(res.data.result);
}
});
},
/**
* 图片上传
*/
doUpload(files) {
var that = this;
this.uploadOneImage(files, function (err, data) {
if (err) {
that.formItem.fc_icon = data.url;
that.organizationLogoIsShow = true;
} else {
alert("图片上传失败");
}
});
},
handleDelete() {
this.deleteModel = true;
},
/**
* 提交数据
*/
submit(name) {
this.$refs[name].validate((valid) => {
// console.log(this.formItem.value1[this.formItem.value1.length-2]);
// return;
if (valid) {
var url = this.ServerIp + this.API.forumUpdateCategory;
var that = this;
var params = {};
params.fc_id = this.$route.query.fc_id;
params.fc_name = this.formItem.fc_name;
params.fc_desc = this.formItem.fc_desc;
params.fc_icon = this.formItem.fc_icon;
params.fc_fid = this.formItem.value1[this.formItem.value1.length - 2];
this.submit_loading = true;
this.$http({
method: 'post',
url: url,
data: params
}).then((res) => {
this.submit_loading = false;
if (res.data.success) {
that.$Message.success('标签更新成功');
that.$router.go(-1);
} else {
that.$Message.error(res.data.result);
}
});
}
});
},
/**
* 获取数据
*/
getForumData() {
var url = this.ServerIp + this.API.forumsSearchCategory + "/fc_id/" + this.$route.query.fc_id;
var that = this;
this.$Spin.show();
this.$http({
method: 'get',
url: url
}).then((res) => {
this.$Spin.hide();
if (res.data.success) {
var forumData = res.data.result.data[0];
that.formItem.fc_name = forumData.fc_name;
that.formItem.fc_desc = forumData.fc_desc;
that.formItem.fc_icon = forumData.fc_icon;
that.formItem.value1 = forumData.fc_path.split("|");
console.log(forumData)
return;
if (that.formItem.fc_name != null && that.formItem.fc_name) {
that.categoryLogoIsShow = true
} else {
that.categoryLogoIsShow = false
}
}
});
},
/**
* 获取论坛分类列表数据
*/
getData: function () {
var url = this.ServerIp + this.API.forumsSearchCategory;
var that = this;
this.loading = true;
this.$http({
method: 'get',
url: url
}).then((res) => {
this.loading = false;
if (res.data.success) {
that.forumData = this.forumTreeData(res.data.result.data);
console.log(that.forumData)
that.forumData.push({
value: "0",
label: "根分类"
})
} else {
}
});
},
},
data() {
return {
deleteModel: false,
submit_loading: false,
delete_loading: false,
formItem: {
fc_name: "",
fc_icon: "",
fc_order: "",
fc_desc: "",
fc_article_count: "",
fc_concern_count: "",
fc_id: "",
fc_fid: "",
fc_path: ""
},
data: [],
value1: [],
forumData: [],
categoryLogoIsShow: false,
ruleInline: {
fc_name: [
{required: true, message: '论坛分类标题不能为空', trigger: 'blur'},
],
fc_icon: [
{required: true, message: '论坛分类logo不能为空', trigger: 'blur'},
],
fc_desc: [
{required: true, message: '论坛分类描述不能为空', trigger: 'blur'},
],
value1: [
{required: true, type: 'array', min: 2, message: '请选择所属类别', trigger: 'blur'}
],
}
}
}
}
</script>
注解：
1、splite(' ')可以将字符串按某个字符或者其他分割。返回数组。
2、reverse()该方法会改变原来的数组，而不会创建新的数组。此函数可以将数组倒序排列。
3、join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(' ');
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献7条内容
所有评论(0)