Element组件，提高编程效率_el-select 允许复制内容-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53111723/article/details/145115098

Element组件，提高编程效率

Element官方文档：

https://element.eleme.cn/

下拉选择框

<el-select style="width: 100%" v-model="form.xx">
  <el-option v-for="item in list" :key="item.id" :value="item.id" :label="item.name"></el-option>
</el-select>

data() {
  return {
    list: [],
  }
}
              
this.$request.get('/xxx/selectAll', {
  params: {
    
  }
}).then(res => {
  this.list = res.data
})

文件、图片上传展示

<el-upload
    :action="$baseUrl + '/files/upload'"
    :headers="{ token: user.token }"
    list-type="picture"
    :on-success="handleImgSuccess"
>
  <el-button type="primary">上传</el-button>
</el-upload>

handleImgSuccess(response, file, fileList) {
  this.form.img = response.data
},

// 表格显示 图片
<template v-slot="scope">
  <div style="display: flex; align-items: center">
    <el-image style="width: 40px; height: 40px;" v-if="scope.row.img"
              :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
  </div>
</template>

// 表格显示 下载
<template v-slot="scope">
  <el-link type="primary" :href='scope.row.file'>下载</el-link>
</template>

日期时间

<el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                          v-model="form.date" style="width: 100%"></el-date-picker>

<el-date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
                v-model="form.time" style="width: 100%"></el-date-picker>

单选

<el-radio-group v-model="form.sex">
  <el-radio label="男"></el-radio>
  <el-radio label="女"></el-radio>
</el-radio-group>

表单校验

rules: {
    username: [
      { required: true, message: '请输入账号', trigger: 'blur' },
      { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
    ],
    confirmPass: [
      { validator: validateConfirmPass, trigger: 'blur' }
    ]
}
   
let validateConfirmPass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'));
  } else if (value !== this.form.password) {
    callback(new Error('两次输入密码不一致!'));
  } else {
    callback();
  }
}

只能输入整数

num: [
  { required: true, message: '请输入整数', trigger: 'blur' },
  { pattern: /^[1-9]\d*$/, message: '只能输入正整数',}
]

审核

<el-table-column label="审核" align="center" width="180" v-if="user.role === 'ADMIN'">
  <template v-slot="scope">
    <el-button v-if="scope.row.status === '待审核'" size="mini" type="success" plain @click="changeStatus(scope.row, '通过')">通过</el-button>
    <el-button v-if="scope.row.status === '待审核'" size="mini" type="danger" plain @click="changeStatus(scope.row, '拒绝')">拒绝</el-button>
  </template>
</el-table-column>

changeStatus(row, status) {
  this.form = JSON.parse(JSON.stringify(row))
  this.form.status = status
  this.$confirm('您确定'+status+'吗？', '确认审核', {type: "warning"}).then(response => {
    this.$request.put('/xxx/update', this.form).then(res => {
      if (res.code === '200') {
        this.$message.success('审核成功')
        this.load(1)
      } else {
        this.$message.error(res.msg)  // 弹出错误的信息
      }
    })
  }).catch(e => {})
},

表格显示高亮信息

<template v-slot="scope">
    <el-tag type="info" v-if="scope.row.status === '待审核'">待审核</el-tag>
    <el-tag type="success" v-if="scope.row.status === '通过'">通过</el-tag>
    <el-tag type="danger" v-if="scope.row.status === '拒绝'">拒绝</el-tag>
</template>

表格里显示图片

<template v-slot="scope">
  <el-image v-if="scope.row.img" style="width: 50px" :src="scope.row.img" :preview-src-list="[scope.row.img]"></el-image>
</template>

表格里显示视频

<template v-slot="scope">
  <video :src="scope.row.file" controls style="width: 300px"></video>
</template>

评分

<el-rate v-model="star" />

data() {
  return {
    star: 5
  }
}

树形下拉菜单（原创）

<el-select ref="selectTree" v-model="form.departmentId" clearable style="width: 100%;">
  <el-option
      v-for="item in departmentList"
      :key="item.id"
      :value="item.id"
      :label="item.name"
      style="display: none;"/>
  <el-tree
      :data="departmentTree"
      :props="{children: 'children', label: 'name'}"
      highlight-current
      @node-click="handleNodeClick"
      default-expand-all />
</el-select>

created() {
  // 先查出扁平的部门数组
  this.$request.get('/department/selectAll').then(res => {
    this.departmentList = res.data
  })
  // 再查出树形的部门数组
  this.$request.get('/department/selectTree').then(res => {
    this.departmentTree = res.data
  })
}
        
// node 就是department对象
handleNodeClick(node) {
  this.$set(this.form, 'departmentId', node.id)
  this.$refs.selectTree.blur()
},

Switch切换按钮

<el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>

轮播图

<el-carousel height="400px">
	<el-carousel-item v-for="item in imgs" :key="item">
    <img :src="item" alt="" style="width: 100%">
  </el-carousel-item>
</el-carousel>

时间线

<el-timeline style="margin-top: 20px" reverse>
  <el-timeline-item :color="'#0bbd87'" :timestamp="item.time" placement="top" v-for="item in noticeList" :key="item.id">
    <el-card>
      <p style="line-height: 24px">{{ item.content }}</p>
    </el-card>
  </el-timeline-item>
</el-timeline>

下拉多选

<el-select allow-create filterable multiple v-model="tags" style="width: 100%">
  <el-option v-for="(item, index) in []" :key="index" :value="item"></el-option>
</el-select>

创建属性 tags

tags: []

在编辑的时候注意把保存的JSON字符串转成JSON数组

this.tags = JSON.parse(this.form.tags || '[]')

在保存的时候把JSON数组转成JSON字符串存到数据库

this.form.tags = JSON.stringify(this.tags)   // 把数组转成JSON字符串存储

富文本

安装：

 npm i wangeditor --save

页面导入

import E from "wangeditor"
setRichText(html) {
  this.$nextTick(() => {
    this.editor = new E(`#editor`)
    this.editor.config.uploadImgServer = this.$baseUrl + '/files/editor/upload'
    this.editor.config.uploadFileName = 'file'
    this.editor.config.uploadImgHeaders = {
      token: this.user.token
    }
    this.editor.config.uploadImgParams = {
      type: 'img',
    }
    this.editor.config.zIndex = 0
    this.editor.create()  // 创建
    this.editor.txt.html(html)
  })
},

新增和编辑设置富文本

handleAdd() {   // 新增数据
  this.form = {}  // 新增数据的时候清空数据
  this.fromVisible = true   // 打开弹窗
  this.setRichText('')
},
handleEdit(row) {   // 编辑数据
  this.form = JSON.parse(JSON.stringify(row))  // 给form对象赋值  注意要深拷贝数据
  this.fromVisible = true   // 打开弹窗
  this.setRichText(this.form.content)
},

后台富文本文件上传接口

/**
 * 富文本文件上传
 */
@PostMapping("/editor/upload")
public Dict editorUpload(MultipartFile file) {
    String flag;
    synchronized (FileController.class) {
        flag = System.currentTimeMillis() + "";
        ThreadUtil.sleep(1L);
    }
    String fileName = file.getOriginalFilename();
    try {
        if (!FileUtil.isDirectory(filePath)) {
            FileUtil.mkdir(filePath);
        }
        // 文件存储形式：时间戳-文件名
        FileUtil.writeBytes(file.getBytes(), filePath + flag + "-" + fileName);  // ***/manager/files/1697438073596-avatar.png
        System.out.println(fileName + "--上传成功");

    } catch (Exception e) {
        System.err.println(fileName + "--文件上传失败");
    }
    String http = "http://" + ip + ":" + port + "/files/";
    return Dict.create().set("errno", 0).set("data", CollUtil.newArrayList(Dict.create().set("url", http + flag + "-" + fileName)));
}

注意：在save的时候设置变量值

this.form.content = this.editor.txt.html()

预览

<el-dialog title="文章内容" :visible.sync="fromVisible1" width="50%" :close-on-click-modal="false" destroy-on-close>
  <div class="w-e-text">
  	<div v-html="content"></div>
  </div>

  <div slot="footer" class="dialog-footer">
    <el-button @click="fromVisible1 = false">关 闭</el-button>
  </div>
</el-dialog>

变量

editor: null,
content: '',
fromVisible1: false,

表格

<el-table-column label="查看内容">
  <template v-slot="scope">
    <el-button @click="preview(scope.row.content)">查看内容</el-button>
  </template>
</el-table-column>

函数

preview(content) {
  this.content = content
  this.fromVisible1 = true
},

表单

<el-form-item label="内容" prop="content">
  <div id="editor"></div>
</el-form-item>