目錄
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(' ');