当前位置：首页>前端>正文

element组件中参数这么等于data element常用组件

前端2024-05-05 23:34:44

7.组件框架

7.0.Element UI

js -> jquery ->jqueryui /easyUI / bootstrap UI

js -> vue -> elementUI

https://element.eleme.cn/#/zh-CN

$ npm i element-ui -S

<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

在 main.js 中写入以下内容：

import Vue from 'vue';

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

7.1.分列

一行 24列

<el-form-item label="标签" prop="id">    
      <el-col :span="6">
		...
      </el-col>
      <el-col align="right"  :span="3"  >标签    </el-col>
      <el-col :span="6">
		...
      </el-col>
      <el-col align="right"  :span="3"  >标签    </el-col>
      <el-col :span="6">
		...
      </el-col>
    </el-form-item>

7.2.上传下载

7.2.1.1.上传组件

<!--
            list-type:  文件列表的类型	string	text/picture/picture-card	
            action :  必选参数，上传的地址	string
            :accept :  接受上传的文件类型
            :limit : 最大允许上传个数
            :on-exceed : 文件超出个数限制时的钩子
            :on-preview : 点击文件列表中已上传的文件时的钩子
            :on-remove : 文件列表移除文件时的钩子
            :before-upload : 上传文件之前的钩子
            :file-list : 上传的文件列表 array
            :auto-upload : 是否在选取文件后立即进行上传

            :data: 上传时附带的额外参数
            :multiple : 是否支持多选文件
            :show-file-list: 是否显示已上传文件列表 boolean
            :on-success: 文件上传成功时的钩子

            :headers="Myhead" 设置上传头
          -->
          <el-upload
            
            list-type="picture-card"
            ref="upload"
            :action="uploadUrl"
            :accept="acceptFileType"
            :limit="1"
            :data="{'type':'brand_logo'}"
            :on-exceed="handleExceed"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-upload="beforeUpload"
            :file-list="fileList"
            :auto-upload="true"

             :headers="Myhead" 
         
            :show-file-list="showFileList"
            :on-success="handleUploadSuccess"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过1MB</div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>

data中的对应属性

imageUrl: "",
      uploadUrl:  "http://localhost:8900/renren-fast/localUpload/uploadForType",

      uploadTemplateDialog: false,
      fileList: [],        
      uploadLoading: false,
      acceptFileType: "image/png, image/jpeg", // 设置上传文件类型
      downLoadLoading: "",

      dialogImageUrl: "",
      dialogVisible: false,

      showFileList: true,

7.2.1.2. 对应钩子函数放到methods里

// 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      this.$message.warning("只能选择1个文件!");
    },



    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {
      //console.log(file,fileList);
    },

    // 点击文件列表中已上传的文件时的钩子 ,  在 模态窗中显示
    handlePreview(file) {
      // console.log(file);
      console.log(file.url);
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 上传文件之前的钩子
    beforeUpload(file) {
      var that = this;
      // console.log("file:",file)
      //文件类型
      var fileName = file.name.substring(file.name.lastIndexOf(".") + 1);
      if ( !(fileName == "png" || fileName == "jpg"  || fileName == "jpeg") ) {
        that.uploadTemplateDialog = false;
        that.$message({
          type: "error",
          showClose: true,
          duration: 3000,
          message: "文件类型不是.png/.jpg文件!",
        });
        return false;
      }

      //读取文件大小
      var fileSize = file.size;
      // console.log(fileSize);
      if (fileSize > 1048576) {
        that.uploadTemplateDialog = false;
        that.$message({
          type: "error",
          showClose: true,
          duration: 3000,
          message: "文件大于1M!",
        });
        return false;
      }

      // 上传时 的 遮罩
      that.downloadLoading = that.$loading({
        lock: true,
        text: "数据上传中...",
        spinner: "el-icon-loading",
        background: "rgba(0,0,0,0.7)",
      });

     
      return true;
    },


    //文件上传成功时的钩子
    handleUploadSuccess(res, file) {
      // console.log(res)
      console.log("上传成功..." )

      // 用于在页面回显 图片
      try {
        this.imageUrl = file.raw;
      } catch (error) {
        this.imageUrl = window.URL.createObjectURL(file.raw);
      }

      // console.log("this.imageUrl ", this.imageUrl  )

      this.downloadLoading.close();
      this.uploadLoading = false;
      this.dataForm.brandLogoPath = res.path

      this.showFileList = true;

    },

7.2.1.3. 上传头信息

写在计算函数里

computed: {
      Myhead: function () {
          return {token: this.$cookie.get('token')}
      }
  },

7.2.1.4. 回显

在 init 函数里查看到对应的记录信息之后

this.fileList.pop();
   this.fileList.push({name:  this.dataForm.brandLogoPath, url:  this.dataForm.brandLogoPath });

7.2.1.5.后台处理

常量配置

public class Const {

    /**
     * 本地存储 文件所在的路径
     */
    public static final String UPLOAD_LOCAL_PATH = "D:/upload/images/webshop/";

    /**
     * 本地存储 文件存储的路径
     */
    public static final String UPLOAD_LOCAL_PATH_WEB_URL = "http://127.0.0.1:8900/renren-fast/upload/";
}

在对应的controller中

@RequestMapping("/upload")
    @ResponseBody
    public R upload(@RequestParam("file") MultipartFile file) throws IOException {

        System.out.println("file => " + file.getOriginalFilename());
        if (file == null || file.isEmpty()) {
            System.out.println(" = " + "上传失败，请选择文件");
            return R.error("上传失败，请选择文件");
        } else {
            String path = FileUtils.saveFile(file);
            System.out.println("path = " + path);
            return R.ok().put("path", path);
        }
    }
    @RequestMapping("/uploadForType")
    @ResponseBody
    public R uploadForType(@RequestParam("type")String type, @RequestParam("file") MultipartFile file) throws IOException {

        System.out.println("type = " + type);
        System.out.println("file => " + file.getOriginalFilename());
        if (file == null || file.isEmpty()) {
            System.out.println(" = " + "上传失败，请选择文件");
            return R.error("上传失败，请选择文件");
        } else {
            String path = FileUtils.saveFileForType(file, type);
            System.out.println("path = " + path);
            return R.ok().put("path", path).put("type", type);
        }
    }

在 FileUtils 工具类中

/**
     * @description 文件上传，保存在本地硬盘，返回文件请求路径
     * @param picFile
     * @return
     * @throws IOException
     */
    /**/
    public static String saveFile(MultipartFile picFile) throws IOException {
        String location = null;
        String destName = "";
        if(!picFile.isEmpty()){
            //得到真实路径
            String fileName = picFile.getOriginalFilename();
            String kzm = fileName.substring(fileName.lastIndexOf("."));
            //要保存的文件名
            destName = UUID.randomUUID().toString()+kzm;
            //取得上传文件存储路径
            //File directory = new File("");// 参数为空
            //String path = directory.getCanonicalPath()+"/src/main/webapp"+Const.PIC_FILE;
            String path = Const.UPLOAD_LOCAL_PATH;
            //如果上传文件存储路径不存在则创建一个
            File s2 = new File(path);
            if (s2.exists()==false) {
                s2.mkdirs();
            }
            //文件路径
            location = path+"/"+destName;
            try {
                picFile.transferTo(new File(location));
            } catch (IllegalStateException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        String url = Const.UPLOAD_LOCAL_PATH_WEB_URL + destName;
        return url;
    }

    /**
     * @description 文件上传，保存在本地硬盘，返回文件请求路径
     * @param picFile
     * @return
     * @throws IOException
     */
    /**/
    public static String saveFileForType(MultipartFile picFile, String type) throws IOException {
        String location = null;
        String destName = "";
        if(!picFile.isEmpty()){
            //得到真实路径
            String fileName = picFile.getOriginalFilename();
            String kzm = fileName.substring(fileName.lastIndexOf("."));
            //要保存的文件名
            destName = UUID.randomUUID().toString()+kzm;
            //取得上传文件存储路径
            //File directory = new File("");// 参数为空
            //String path = directory.getCanonicalPath()+"/src/main/webapp"+Const.PIC_FILE;
            String path = Const.UPLOAD_LOCAL_PATH + type + "/";
            //如果上传文件存储路径不存在则创建一个
            File s2 = new File(path);
            if (s2.exists()==false) {
                s2.mkdirs();
            }
            //文件路径
            location = path+"/"+destName;
            try {
                picFile.transferTo(new File(location));
            } catch (IllegalStateException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }
        String url = Const.UPLOAD_LOCAL_PATH_WEB_URL + type + "/" + destName;
        return url;
    }

7.2.2.图片显示

在后台的项目中要增加

其中 Const.UPLOAD_LOCAL_PATH 为文件存储的本地路径

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/upload/**").addResourceLocations("file:" + Const.UPLOAD_LOCAL_PATH);
    }
}

只要实体类的属性值为 : http://127.0.0.1:8900/renren-fast/upload/brand_logo/3b73aaa7-ec21-4601-9432-ecabf07750d7.jpg

<template slot-scope="scope" >
          <img :src="scope.row.brandLogoPath"  style="width: 150px; height: 60px" />
        </template>

在 renren-fast 项目中

路径 : io.renren.config.ShiroConfig

由于没有传递 token 还要关闭 shiro的权限控制 ShiroConfig 类

filterMap.put("/upload/**", "anon");

7.3.下拉框

7.3.0.vue-template

<el-select v-model="value" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>

7.3.1. 准备数据

// 在data 中增加用于 迭代的数组
data () {
      return {
        options:[],
          ...

// 在 加载完成的钩子函数中 增加调用 
created() {
    this.oneDataList();
},

// 在methods里增加 获取信息的方法
oneDataList() {
    console.log("请求后台");
    this.dataListLoading = true;
    this.$http({
        url: this.$http.adornUrl("/base/categoryone/listAll"),
        method: "get",
    }).then(({ data }) => {
        console.log(data)
        if (data && data.code === 0) {
            this.options = data.list;
        } else {
            this.options = [];
        }
    });
},

7.3.2. 下拉组件

因为要同时保存一级分类的 id 和 name 所以 option 的 :value 有变化 , 同时要结合 @change 事件

<el-select v-model="dataForm.coneName" placeholder="请选择一级分类" 
            @change="checkedOption"  value-key="coneId" >
     <el-option
                v-for="item in options"
                :key="item.coneId"
                :label="item.coneName +':' + item.coneId"
                :value="item"
                >
     </el-option>
</el-select>

7.3.3.封装数据

在methods 里处理数据

// 改变 下拉框
checkedOption(item){
    this.dataForm.coneId = item.coneId
    this.dataForm.coneName = item.coneName
},

7.4.模态窗

通过父子组件 + dialog 方式完成

7.4.0.建立子组件

先在common下建立子组件 , 结构与列表页相似

<template>
<!-- 模态窗-->
<el-dialog title="选择品牌"  width="80%"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >

	<!-- 显示内容 -->    
    <el-form :inline="true" :model="whereForm" @keyup.enter.native="getDataList()">
      <el-form-item>
        <el-input    v-model="whereForm.key" placeholder="参数名" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      :highlight-current-row = "true"
      @current-change="handleCurrentChange"
      style="width: 100%;">


      <el-table-column
        prop="brandId"
        header-align="center"
        align="center"
        label="品牌主键">
      </el-table-column>
      <el-table-column
        prop="brandCnName"
        header-align="center"
        align="center"
        label="中文名">
      </el-table-column>
      <el-table-column
        prop="brandEnName"
        header-align="center"
        align="center"
        label="英文名">
      </el-table-column>
      <el-table-column
        prop="brandLogoPath"
        header-align="center"
        align="center"  width="180"
        label="logo路径">
        <template slot-scope="scope" >
          <img :src="scope.row.brandLogoPath"  style="width: 80px; height: 30px" />
        </template>
      </el-table-column>
      <el-table-column
        prop="brandWebUrl"
        header-align="center"
        align="center"
           width="220"
        label="网址">
        <template slot-scope="scope">
            <!-- <el-button type="text" size="small" >{{scope.row.brandWebUrl}}</el-button> -->
            <a :href="scope.row.brandWebUrl"  target="_blank" >{{scope.row.brandWebUrl}}</a>
        </template>
      </el-table-column>
      <el-table-column
        prop="brandNum"
        header-align="center"
        align="center"
           width="80"
        label="权重">
      </el-table-column>
      <el-table-column
        prop="brandInfo"
        header-align="center"
        align="center"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="brandFoundedDate"
        header-align="center"
        align="center"
          :formatter="dateFormat"
        label="成立时间">
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="sizeChangeHandle"
      @current-change="currentChangeHandle"
      :current-page="pageIndex"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      :total="totalPage"
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>


	<!--操作按钮-->
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="selectedBrand()">确 定</el-button>
    </span>

</el-dialog>
</template>

<script>

  export default {

    data () {
      return {
        currentRow: null,         
        visible: false, // 模态窗 显隐     
        whereForm: {
         key: ''
        },
        dataList: [],
        pageIndex: 1,
        pageSize: 10,
        totalPage: 0,
        dataListLoading: false,
        dataListSelections: [],
        addOrUpdateVisible: false
      }
    },


    methods: {

    /**
     * 选中 关闭模态窗
     */
    selectedBrand() {
      // console.log(this.currentRow)
      this.visible = false;
      // 触发 父组件的事件
      this.$emit("selectedBrand", this.currentRow);
    },

    
    handleCurrentChange(val) {
      this.currentRow = val;
    },

    /**
     * 初始化方法 ,  由父组件调用
     */
    init (id) {    
      this.visible = true
      this.$nextTick(() => {
        this.getDataList();
      })
    },


    dateFormat(row,column){
         
       var dT=new Date(row.brandFoundedDate);//row 表示一行数据, dateTime 表示要格式化的字段名称
       return dT.getFullYear()+"-"+(dT.getMonth()+1)+"-"+dT.getDate();
    },

   
      // 获取数据列表
      getDataList () {
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/goods/brandinfo/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key':  this.whereForm.key
          })
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.page.list
            this.totalPage = data.page.totalCount
          } else {
            this.dataList = []
            this.totalPage = 0
          }
          this.dataListLoading = false
        })
      },
      // 每页数
      sizeChangeHandle (val) {
        this.pageSize = val
        this.pageIndex = 1
        this.getDataList()
      },
      // 当前页
      currentChangeHandle (val) {
        this.pageIndex = val
        this.getDataList()
      },
      // 多选
      selectionChangeHandle (val) {
        this.dataListSelections = val
      },

    }
  }
</script>

7.4.1.引入组件

先引入这个el-dialog组件

import BrandDialog from "../common/brand-dialog";

根据具体的路径完成一个组件页面的引入，并且取名叫做BrandDialog ;

然后声明组件的使用

components: { BrandDialog },

根据规则定义一个组件，按照驼峰的形式BrandDialog 转换成组件的名字,

在template标签里面添加一个组件

特别注意: 子组件标签与原来模版内容要并列在 template 结点下,
但template 必须有唯一根结点

<brand-dialog
      v-if="brandDialogVisible"
      ref="brandDialog" ></brand-dialog>

通过 brandDialogVisible 值来控制显隐, 在data中声明并赋初始值为false

// 品牌模态窗 显隐标识
  brandDialogVisible: false,

7.4.2.触发组件显示

增加元素, 触发的方法，

<el-form-item label="选择品牌" prop="brdId">
      <el-col :span="12">
            <el-input v-model="dataForm.brandCnName" placeholder="选择品牌" :disabled="true" ></el-input>
        </el-col>
        <el-col :span="6"  >
          <el-button type="success" round @click="openBrandDialog" >选择品牌</el-button >
        </el-col>
    </el-form-item>

添加对应的函数

/**
       * 打开 模态窗
       */
      openBrandDialog(){
          // 设置模态窗 显示
          this.brandDialogVisible = true;
          this.$nextTick(() => {
            // 调用 模态窗的初始化方法  
            this.$refs.brandDialog.init();
          });
      },

this.$nextTick()这是Vue生命周期中的钩子函数的其中之一，在显示的时候执行参数对应的函数，

然后就是this.$refs.brandDialog.init();使用this.$refs.组件名.组件方法(参数)，

组件名称是在设定的时候通过ref="brandDialog"设定组件的名称变成refs的直接使用。

7.4.3.子组件数据

然后我们在组件里面，组件中的主体是在

<el-dialog title="选择品牌"  width="80%"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
    ... <!--数据显示 -->
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="selectedBrand()">确 定</el-button>
    </span>
 </el-dialog>

里面的，通过 :visible.sync="visible" 绑定一个boolean值来完成对于dialog的显示，

然后title完成对于弹窗的题目的设定，

然后展示init方法

/**
     * 初始化方法 ,  由父组件调用
     */
    init (id) {    
      this.visible = true
      this.$nextTick(() => {
          //调用查询数据的方法
        this.getDataList();
      })
    },

所有的 v-if 想要产生效果都需要设定默认值才能够使用
在这里具体逻辑就是this.visible = true;显示dialog，

然后就是 this.getDataList(); 查询列表数据

7.4.4.点击选中

在 data 声明用于记录选中信息

currentRow: null,

在 el-table 中增加 highlight-current-row 是否要高亮当前选中行

@current-change=“handleCurrentChange” 当表格的当前行发生变化的时候会触发该事件

<el-table
      :data="dataList"
      border
      v-loading="dataListLoading"
      :highlight-current-row = "true"
      @current-change="handleCurrentChange"
      style="width: 100%;">

对就的处理函数

handleCurrentChange(val) {
      // 将选中的行 赋值给  currentRow,  要先在 data中声明  
      this.currentRow = val;
    },

7.4.5.回传信息

点击确定按钮执行函数

/**
     * 选中 关闭模态窗
     */
    selectedBrand() {
      // console.log(this.currentRow)
      // 隐藏 模态窗
      this.visible = false;
      // 触发 父组件的事件, 将选中行信息传回
      this.$emit("selectedBrand", this.currentRow);
    },

7.4.6.父组件接值

在组件引用里加入

<brand-dialog
      v-if="brandDialogVisible"
      ref="brandDialog"

      @selectedBrand="selectedBrand"  ></brand-dialog>

@selectedBrand="selectedBrand"

等号左边与子组件调用的方法相对应

等号右边是对应父组件的函数

对应的函数, 接收到子组件传来信息, 并对dataForm 进行赋值

selectedBrand(brandData){
        console.log(brandData)
        this.dataForm.brdId = brandData.brandId;
        this.dataForm.brandCnName = brandData.brandCnName;
      },

7.5.树

7.5.1.vue页面

<template>
  <div>
 <el-switch v-model="draggable" active-text="开启拖拽" inactive-text="关闭拖拽"></el-switch>
    <el-button v-if="draggable" @click="batchSave" >批量保存</el-button>
    <el-button type="danger"    @click="batchDelete" >批量删除</el-button>

  <el-tree 
      :data="data" 
      :props="defaultProps" 
      @node-click="handleNodeClick" 
      :expand-on-click-node="false"
      show-checkbox     
      node-key="areaId"
      :default-expanded-keys="expandedKey"
      :draggable="draggable"
      :allow-drop="allowDrop"
      @node-drop="handleDrop"
      ref="dataTree"  >

      <span class="custom-tree-node" slot-scope="{ node, data }">
        <span>{{ node.label }}</span>
        <span>
          <el-button  
            v-if="node.level <=4"
            type="text"
            size="mini" 
            @click="() => append(data)">
            添加
          </el-button>

          <el-button type="text" size="mini" @click="edit(data)">修改</el-button>

          <el-button 
            v-if="node.childNodes.length==0"
            type="text"
            size="mini"
            @click="() => remove(node, data)">
            删除
          </el-button>
        </span>
      </span>
  </el-tree>

  <!-- 添加 对话窗 -->
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    :close-on-click-modal="false"
    >
   <el-form :model="basearea">
    <el-form-item label="地区名称" >
      <el-input v-model="basearea.areaName" autocomplete="off"></el-input>
    </el-form-item>    
    <el-form-item label="地区代号" >
      <el-input v-model="basearea.areaCode" autocomplete="off"></el-input>
    </el-form-item>    
  </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitData">确 定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>

  export default {

    activated () {
      this.getDataList()
    },
    data() {
      return {
        basearea: {
          areaId: 0,
          areaParId: '',
          areaName: '',
          areaCode: '',
          areaLevel: '',
          areaParName: '',
          areaSort: ''
        },


        dialogType:"", // 对话窗类型 add/edit
        dialogVisible: false, // 对话窗 显隐
        title: "",     // 对话窗 标题

        maxLevel: 0, // 最大深度
        draggable: false, // 是否可以拖拽
        updateNodes: [], // 拖拽后要更新的结点集合
        pCid: [],  //  父结点

        data: [],   // 树形 显示数据
        expandedKey: [],  // 展开结点ID

        defaultProps: {
          children: 'children',
          label: 'areaName'
        }
      };
    },
    methods: {
      /**
       *点击事件
       */
      handleNodeClick(data) {
        console.log(data);
      },
      /**
       * 得到 数据
       */
      getDataList(){
        this.dataListLoading = true
        this.$http({
          url: this.$http.adornUrl('/base/basearea/list/tree'),
          method: 'get'
        }).then(({data}) => {
          console.log("数据加载成功!..." , data)
          this.data=data.data;
          this.dataListLoading = false
        })
      },
      /**
       * 批量删除
       */
      batchDelete() {
        let areaIds = [];
        let checkedNodes = this.$refs.dataTree.getCheckedNodes();
        console.log("被选中的元素", checkedNodes);
        for (let i = 0; i < checkedNodes.length; i++) {
          console.log(checkedNodes[i]);
          // 没有子结点
          if(checkedNodes[i].children==null){
              areaIds.push(checkedNodes[i].areaId);
          }
         
        }
        this.$confirm(`是否批量删除【${areaIds}】分类?`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$http({
              url: this.$http.adornUrl("/base/basearea/delete"),
              method: "post",
              data: this.$http.adornData(areaIds, false)
            }).then(({ data }) => {
              this.$message({
                message: "信息批量删除成功",
                type: "success"
              });
             this.getDataList();
                //设置需要默认展开的菜单
            //  this.expandedKey = [this.basearea.areaParId];
            });
          })
          .catch(() => {});
      },

        /** 
         * 拖拽成功完成时触发的事件函数
         * 
         * 拖拽方法 四个参数
         * 被拖拽节点对应的 Node、
         * 结束拖拽时最后进入的节点、
         * 被拖拽节点的放置位置（before、after、inner）、
         * event
         */
      handleDrop(draggingNode, dropNode, dropType, ev) {
        
        // console.log("handleDrop: ", draggingNode, dropNode, dropType);
        //1、当前节点最新的父节点id
        let pCid = 0;
        let siblings = null;  // 兄弟结点集合
        if (dropType == "before" || dropType == "after") {
          pCid =
            dropNode.parent.data.areaId == undefined
              ? 0
              : dropNode.parent.data.areaId;
          siblings = dropNode.parent.childNodes;

        } else {
          pCid = dropNode.data.areaId;
          siblings = dropNode.childNodes;
        }

        this.pCid.push(pCid);
        console.log(pCid, siblings)

        //2、当前拖拽节点的最新顺序，
        for (let i = 0; i < siblings.length; i++) {
          
     
           let parName = siblings[i].parent.data.areaName
    

          // 如果是拖动的结点
          if (siblings[i].data.areaId == draggingNode.data.areaId) {
            //如果遍历的是当前正在拖拽的节点
            let catLevel = draggingNode.level;
            if (siblings[i].level != draggingNode.level) {
              //当前节点的层级发生变化
              catLevel = siblings[i].level;

              //修改他子节点的层级
              this.updateChildNodeLevel(siblings[i]);
            }
            this.updateNodes.push({
              areaId: siblings[i].data.areaId,
              areaSort: i,
              areaParId: pCid,
              areaLevel: catLevel-1,
              areaParName: parName
            });
          } else {
            this.updateNodes.push({ areaId: siblings[i].data.areaId, areaSort: i });
          }
        }

        //3、当前拖拽节点的最新层级
        console.log("updateNodes", this.updateNodes);

      },
      
        /**
         * 更新被拖拽结点子结点信息
         */
      updateChildNodeLevel(node) {
        console.log("updateChildNodeLevel:", node)
        if (node.childNodes.length > 0) {
          for (let i = 0; i < node.childNodes.length; i++) {
            var cNode = node.childNodes[i].data;
            this.updateNodes.push({
              areaId: cNode.areaId,
              areaLevel: node.childNodes[i].level-1
            });
            this.updateChildNodeLevel(node.childNodes[i]);
          }
        }
      },

    /**
     * 批量保存
     */
    batchSave() {

      console.log("批量保存", this.updateNodes )

      this.$http({
        url: this.$http.adornUrl("/base/basearea/update/sort"),
        method: "post",
        data: this.$http.adornData(this.updateNodes, false)
      }).then(({ data }) => {
        this.$message({
          message: "地理信息顺序等修改成功",
          type: "success"
        });
        //刷新出新的菜单
        this.getDataList();
        //设置需要默认展开的菜单
        this.expandedKey = this.pCid;
        this.updateNodes = [];
        this.maxLevel = 0;
        // this.pCid = 0;
      });
    },

      /**
       * 拖拽时判定目标节点能否被放置
       */
      allowDrop(draggingNode, dropNode, type) {
        //1、被拖动的当前节点以及所在的父节点总层数不能大于3

        //1）、被拖动的当前节点总层数
        console.log("allowDrop:", draggingNode, dropNode, type);
        //
        this.countNodeLevel(draggingNode);
        console.log(this.maxLevel ,"><", draggingNode.level)
        //当前正在拖动的节点+父节点所在的深度不大于3即可
        let deep = Math.abs(this.maxLevel - draggingNode.level) + 1;
        console.log("深度：", deep);

        //   this.maxLevel
        if (type == "inner") {
          // console.log(
          //   `this.maxLevel：${this.maxLevel}；draggingNode.data.catLevel：${draggingNode.data.catLevel}；dropNode.level：${dropNode.level}`
          // );
          return deep + dropNode.level <= 5;
        } else {
          return deep + dropNode.parent.level <= 5;
        }
      },

        /**
         * 找到所有子节点，求出最大深度
         */
      countNodeLevel(node) {
        //判断是有子结点
        if (node.childNodes != null && node.childNodes.length > 0) {
          for (let i = 0; i < node.childNodes.length; i++) {
            if (node.childNodes[i].level > this.maxLevel) {
              this.maxLevel = node.childNodes[i].level;
            }

            // 递归 调用
            this.countNodeLevel(node.childNodes[i]);
          }
        }else{
          this.maxLevel=node.level
        }
      },

        /**
         * 点击修改按钮
         */
      edit(data) {
       
        console.log("要修改的数据", data);
        this.dialogType = "edit";
        this.title = "修改地理信息";
     
        this.dialogVisible = true;

        //发送请求获取当前节点最新的数据
        this.$http({
          url: this.$http.adornUrl(`/base/basearea/info/${data.areaId}`),
          method: "get"
        }).then(({ data }) => {
          //请求成功
          console.log("要回显的数据", data);
            this.basearea.areaParId = data.baseArea.areaParId;
            this.basearea.areaLevel = data.baseArea.areaLevel;
            this.basearea.areaId = data.baseArea.areaId;
            this.basearea.areaName = data.baseArea.areaName;
            this.basearea.areaSort = data.baseArea.areaSort;
            this.basearea.areaCode = data.baseArea.areaCode;
            this.basearea.areaParName = data.baseArea.areaParName;

        });
      },
      
        /**
         * 点击添加按钮
         */
      append(data) {
      
        this.dialogType = "add";
        this.title = "添加地理信息";
        // this.basearea.areaName = "";
        // 打开对话窗
        this.dialogVisible=true;
        // 初始化数据

        this.basearea.areaParId = data.areaId;
        this.basearea.areaLevel = data.areaLevel * 1 + 1;
        this.basearea.areaId = null;
        this.basearea.areaName = "";
        this.basearea.areaSort = 0;
        this.basearea.areaCode = "";
        this.basearea.areaParName = data.areaName;
      },

        /**
         * 点击 对话窗 确定按钮
         */
      submitData(){

        if (this.dialogType == "add") {
          this.addCategory();
        }
        if (this.dialogType == "edit") {
          this.editCategory();
        }
      },
        /**
         * 修改数据
         */
      editCategory(){

        var { areaId, areaName, areaCode} = this.basearea;
        this.$http({
          url: this.$http.adornUrl("/base/basearea/update"),
          method: "post",
          data: this.$http.adornData( {  areaId, areaName, areaCode}, false)
        }).then(({ data }) => {
          this.$message({
            message: "分类信息修改成功",
            type: "success"
          });
          //关闭对话框
          this.dialogVisible = false;
          //刷新出新的菜单
          this.getDataList();
          //设置需要默认展开的菜单
          this.expandedKey = [this.basearea.areaParId];
        });
      },

        /** 
        *  添加 分类信息
        */
      addCategory(){

        console.log("data", this.basearea)
        this.$http({
          url: this.$http.adornUrl("/base/basearea/save"),
          method: "post",
          data: this.$http.adornData(this.basearea, false)
        }).then(({ data }) => {
          this.$message({
            message: "地理信息保存成功",
            type: "success"
          });
          //关闭对话框
          this.dialogVisible = false;
          //刷新出新的菜单
          this.getDataList();
          //设置需要默认展开的菜单
          this.expandedKey = [this.basearea.areaParId];
        });
      },

      /**
       * 移除 结点
       */
      remove(node, data) {

        var ids = [data.areaId]
        console.log(ids);
        this.$confirm(`确定对[${data.areaName}]删除操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/base/basearea/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
              // 为默认打开的结点(也就是当前删除结点的父结点)赋值
              this.expandedKey = [node.parent.data.areaId];
            } else {
              this.$message({
                message: data.msg,
                type: 'error',
                duration: 1500,
                onClose: () => {
                  this.getDataList()
                }
              })
                // 为默认打开的结点(也就是当前删除结点的父结点)赋值
              this.expandedKey = [node.parent.data.areaId];
            }
            console.log("删除成功!")
          })
        }).catch(()=>{ 
           console.log("取消删除!")
        });

      },
    }
   
  }
</script>

7.5.2.后台准备数据

后台实体类增加子结点集合属性

@TableField(exist = false)
	private List<BaseAreaEntity> children;

后台controller 中准备显示树型数据

/**
     * 查询出所有的分类及子类, 以数形结构组装越来
     */
    @RequestMapping("/list/tree")
    public R listWithTree(){
        List<BaseAreaEntity> baseAreaTrees = baseAreaService.listWithTree();

        return R.ok().put("data", baseAreaTrees);
    }

serviceImpl中

@Override
    public List<BaseAreaEntity> listWithTree() {

        //1、查出所有分类
        List<BaseAreaEntity> allList = baseMapper.selectList(null);
        //2、组装成父子的树形结构
        //2.1）、找到所有的一级分类
        List<BaseAreaEntity> baseAreas = allList.stream()
                .filter(baseAreaEntity ->
                    baseAreaEntity.getAreaParId()==null
                )
                .peek((baseAreaEntity)->{
                    baseAreaEntity.setChildren(getChildrens(baseAreaEntity, allList));
                })
                .sorted((b1,b2)->{
                    return (b1.getAreaSort()==null?0:b1.getAreaSort()) - (b2.getAreaSort()==null?0:b2.getAreaSort());
                })
                .collect(Collectors.toList());

            return baseAreas;
    }

    //递归查找所有菜单的子菜单
    private List<BaseAreaEntity> getChildrens(BaseAreaEntity root, List<BaseAreaEntity> all){

        return all.stream()
                .filter(baseAreaEntity -> root.getAreaId().equals(baseAreaEntity.getAreaParId()))
                .peek(baseAreaEntity -> {
                    //1、找到子菜单
                    List<BaseAreaEntity> childrens = getChildrens(baseAreaEntity, all);
                    if (childrens != null && childrens.size()>0) {
                        baseAreaEntity.setChildren(childrens);
                    }
                })
                .sorted((b1,b2)->{
                    return (b1.getAreaSort()==null?0:b1.getAreaSort()) - (b2.getAreaSort()==null?0:b2.getAreaSort());
                })
                .collect(Collectors.toList());

    }

7.5.3.批量保存修改结点数据

controller中的方法

@RequestMapping("/update/sort")
    public R updateSort(@RequestBody BaseAreaEntity[] baseAreaEntities){
        System.out.println("Arrays.toString(baseAreaEntities) = " + Arrays.toString(baseAreaEntities));
        baseAreaService.updateBatchById(Arrays.asList(baseAreaEntities));
        return R.ok();
    }

7.6.联动

7.6.1.后台准备树形数据

@Override
    public List<Map<String, Object>> listCascader() {

        List<Map<String, Object>> list = categoryOneDao.selectList(null).stream()
                .map(categoryOneEntity -> {
                    Map<String, Object> oneMap = new HashMap<>();
                    oneMap.put("categoryId", categoryOneEntity.getConeId());
                    oneMap.put("categoryName", categoryOneEntity.getConeName());

                    List<CategoryTwoEntity> categoryTwoEntities = categoryTwoDao.selectList(
                            new LambdaQueryWrapper<CategoryTwoEntity>()
                            .eq(CategoryTwoEntity::getConeId, categoryOneEntity.getConeId()));

                    if (categoryTwoEntities != null && categoryTwoEntities.size()>0) {
                        List<Map<String, Object>> twoList = categoryTwoEntities.stream()
                                .map(categoryTwoEntity -> {
                                    Map<String, Object> twoMap = new HashMap<>();
                                    twoMap.put("categoryId", categoryTwoEntity.getCtwoId());
                                    twoMap.put("categoryName", categoryTwoEntity.getCtwoName());

                                    List<CategoryThreeEntity> categoryThreeEntitys = this.list(new LambdaQueryWrapper<CategoryThreeEntity>()
                                            .eq(CategoryThreeEntity::getCtwoId, categoryTwoEntity.getCtwoId()));

                                    if (categoryThreeEntitys != null && categoryThreeEntitys.size() > 0) {
                                        List<Map<String, Object>> thrList = categoryThreeEntitys.stream().map(categoryThreeEntity -> {
                                            Map<String, Object> thrMap = new HashMap<>();
                                            thrMap.put("categoryId", categoryThreeEntity.getCthrId());
                                            thrMap.put("categoryName", categoryThreeEntity.getCthrName());
                                            return thrMap;
                                        }).collect(Collectors.toList());
                                        twoMap.put("children", thrList);
                                    }
                                    return twoMap;
                                })
                                .collect(Collectors.toList());

                        oneMap.put("children", twoList);
                    }

                    return oneMap;
                })
                .collect(Collectors.toList());

        return list;
    }

其中 categoryId 为 id , categoryName 为 name , children 为子结点

7.6.2.页面组件

<el-cascader  style="width:280px;"
              filterable
              clearable 
              placeholder="试试搜索:手机"
              :props="cascaderProps"
              change-on-select
              :options="categoryOptions"        

              @change="handleChange"
              ref="cascader"
              v-model="categoryPath" >
</el-cascader>

data 增加

categoryOptions: [],
        cascaderProps:{
          value:"categoryId",
          label:"categoryName",
          children:"children"
        },
        categoryPath:[],

methods

handleChange(value) {
       console.log(value);   
     	// 在高版本中才有这样的方法
       console.log(this.$refs["cascader"].getCheckedNodes()[0].label)
       console.log(this.$refs["cascader"].getCheckedNodes()[0].pathLabels) //对应的label数组
 },

低版本可以在

for(let i=0; i<this.categoryOptions.length; i++ ){
            console.log( this.categoryOptions[i].categoryId )
            if(this.categoryOptions[i].categoryId == this.categoryPath[0]){
             
              this.dataForm.coneId = this.categoryOptions[i].categoryId
              this.dataForm.coneName = this.categoryOptions[i].categoryName
              for(let l=0; l<this.categoryOptions[i].children.length; l++){
                  if(this.categoryOptions[i].children[l].categoryId == this.categoryPath[1]){
                    this.dataForm.ctwoId = this.categoryOptions[i].children[l].categoryId
                    this.dataForm.ctwoName = this.categoryOptions[i].children[l].categoryName
                    for(let k=0; k<this.categoryOptions[i].children[l].children.length; k++){
                        if(this.categoryOptions[i].children[l].children[k].categoryId == this.categoryPath[2]){
                          this.dataForm.cthrId = this.categoryOptions[i].children[l].children[k].categoryId
                          this.dataForm.cthrName = this.categoryOptions[i].children[l].children[k].categoryName
                        }
                    }
                  }
              }
            }
        }

        console.log("data:", this.dataForm)

7.7.时间,日历

7.7.1.时间信息

Date.now() 取当前时间

原始格式 : 2018-10-30T10:06:20.000Z

new Date(this.xxDate).getTime() 转化为时间戳

7.7.2.按格式显示时间

<el-table-column
        prop="supplierFoundedDate"
        header-align="center"
        align="center"
           :formatter="dateFormat"
        label="成立时间">
      </el-table-column>

对应函数

dateFormat(row,column){    
       var dT = new Date(row.supplierFoundedDate);//row 表示一行数据, supplierFoundedDate 表示要格式化的字段名称
       return dT.getFullYear()+"-"+(dT.getMonth()+1)+"-"+dT.getDate();
     },

7.7.3.日历插件

<el-date-picker
          v-model="dataForm.supplierFoundedDate"
          type="date"
          placeholder="选择成立时间">
        </el-date-picker>

可能是时区等原因, 返回原始格式 : 2018-10-30T10:06:20.000Z, 传递后台不能成功转换成java.util.Date() 会报错
可以通过 new Date(this.dataForm.supplierFoundedDate).getTime() 转化为时间戳来解决

7.8.表格扩展

在列表页面的 el-table 中加入

<el-table-column fixed type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand">
          <el-form-item label="银行名称:">
            <span>{{ props.row.bankName }}</span>
          </el-form-item>
          <el-form-item label="银行账号:">
            <span>{{ props.row.bankSn }}</span>
          </el-form-item>

          <el-form-item label="地址:" style="width: 100%" >
            <span>{{ props.row.supplierAddress }}</span>
          </el-form-item>
          <el-form-item label="描述:" style="width: 100%" >
            <span>{{ props.row.supplierInfo }}</span>
          </el-form-item>
        </el-form>
      </template>
      </el-table-column>

7.9.富文本

7.9.1.tinymce

下载地址 : https://www.tiny.cloud/get-tiny/self-hosted/

语言包地址: https://www.tiny.cloud/get-tiny/language-packages/

# 安装
npm install tinymce -S


# vue2.0版本应该使用
npm install --save "@tinymce/tinymce-vue@^3"


# vue3.0版本应该使用
npm install --save "@tinymce/tinymce-vue@^4"


# 再运行 
npm install tinymce -S

安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下

结构如:
static

tinymce

skins

zh_CN.js

在页面中引入以下文件

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'

import 'tinymce/icons/default/icons';
import 'tinymce/plugins/image';
import 'tinymce/plugins/media';// 插入视频插件
import 'tinymce/plugins/table';// 插入表格插件
import 'tinymce/plugins/lists';// 列表插件
import 'tinymce/plugins/wordcount';// 字数统计插件

tinymce-vue 是一个组件，需要在 components 中注册，

components: { Editor },

然后直接使用

<Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor>

编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件

在data 中配置初始化属性

editorInit: {
    language_url: '/static/tinymce/zh_CN.js',
    language: 'zh_CN',
    skin_url: '/static/tinymce/skins/ui/oxide', // skin路径
    height: 300, // 编辑器高度
    branding: false, // 是否禁用“Powered by TinyMCE”
    menubar: true, // 顶部菜单栏显示
    plugins: this.plugins,
    toolbar: this.toolbar,
}

同时在 mounted 中也需要初始化一次：

mounted (){
	tinymce.init({});
},

如果在这里传入上面的 init 对象，并不能生效，但什么参数都不传也会报错，所以这里传入一个空对象

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能

tinymce 通过添加插件 plugins 的方式来添加功能

比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件

<template>
  <div class='tinymce'>
    <h1>tinymce</h1>
    <editor id='tinymce' v-model='tinymceHtml' :init='init'></editor>
    <div v-html='tinymceHtml'></div>
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
    
export default {
  name: 'tinymce',
  data () {
    return {
      tinymceHtml: '请输入内容',
      init: {
          language_url: '/static/tinymce/zh_CN.js',
          language: 'zh_CN',
          skin_url: '/static/tinymce/skins/ui/oxide', // skin路径
          content_css:'/static/tinymce/skins/content/default/content.css',
          height: 300, // 编辑器高度
          branding: false, // 是否禁用“Powered by TinyMCE”
          menubar: true, // 顶部菜单栏显示
          font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif',
          fontsize_formats:'12px 14px 16px 18px 20px 22px 24px 26px 28px 30px 32px 34px 36px 38px 40px 50px 60px 70px 80px 90px 100px 120px 140px 160px 180px 200px',
          plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
          toolbar:'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
      }
    }
  },
  mounted () {
    tinymce.init({})
  },
  components: {Editor}
}
</script>

但是当富文本在某一个弹窗上使用时，
工具栏会出现下拉选择时的层级比弹窗的小，所以，选项会被弹窗遮挡。
而解决这个问题，需要把工具栏的下拉框的层级提高，
找到static/tinymce/skins/ui/oxide/skin.min.css文件
把class名为tox-tinymce-aux的第一个的z-index属性变大即可

tinymce 在初始化的属性对象中( init对象中 )提供了 images_upload_url 等 api 让用户配置上传图片的相关参数

但为了在不麻烦后端的前提下适配自家的项目，还是得用 images_upload_handler 来自定义一个上传方法

images_upload_handler: (blobInfo, success, failure) => {
       // const img = 'data:image/jpeg;base64,' + blobInfo.base64();
      // success(img);
       this.handleImgUpload(blobInfo, success, failure);
     }

这个方法会提供三个参数：blobInfo, success, failure

其中 blobinfo 是一个对象，包含上传文件的信息

success 和 failure 是函数，上传成功的时候向 success 传入一个图片地址，失败的时候向 failure 传入报错信息

handleImgUpload (blobInfo, success, failure) {
      // 上传的文件信息
        let fd = new FormData();
        fd.append("file", blobInfo.blob());
        fd.append("type","tinymec")
        this.$http({
          url: this.$http.adornUrl(
            "/localUpload/uploadForType" 
          ),
          method: "post",
          data: fd,
          headers: {
            "Content-Type":
              "multipart/form-data;boundary=" + new Date().getTime(),
            "token": this.$cookie.get('token')
          },
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: data.path + ",操作成功",
              type: "success",
              duration: 1500,
              onClose: () => {
                 success(data.path)
              },
            });
          } else {
            failure('error')
          }
        });
}

7.10.Switch 开关

页面元素

<el-table-column
        prop="goodsImgsState"
        header-align="center"
        align="center"
        label="当前状态 : 0 不可用 1 使用">
          <template slot-scope="scope">
          <el-switch
            v-model="scope.row.goodsImgsState"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value="'1'"
            :inactive-value="'0'"
            @change="updateType(scope.row)"
          ></el-switch>
        </template>
      </el-table-column>