Vue实现多级联动(扁平数组转树形数组)cascader

目录

Vue扁平数组转树形数组实现多级联动，数据库数据存储表如下图所示：

扁平数组转树形数组公共方法

搭建界面HTML代码

JS代码

注解：

---

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

4.https://www.iviewui.com/components/cascader