526互联

element-ui使用巧技

发布时间 2023-08-17 15:51:47作者: 丶乔

1.全局修改定义message提示信息

//大写的Message是个构造函数
//1是重新定义构造函数来挂载到原型覆盖原来的。
//2是直接引入Message重新定义它的原型方法。

import Element,{ Message } from 'element-ui'

const message = function(options) {
  let opt = Object.assign(options,{showClose:true})
  Message(opt)
}
message.info = function(msg){
    Message({
      message: msg,
      showClose: true,
    })
}
message.warning = function(msg){
    Message({
      message: msg,
      type: 'warning',
      showClose: true,
    })
}
message.error = function(msg){
    Message({
      message: msg,
      type: 'error',
      showClose: true,
    })
}
message.success = function(msg){
  debugger;
    Message({
      message: msg,
      type: 'success',
      showClose: true,
    })
}

Vue.prototype.$message= message


或者
import { Message } from 'element-ui'
Message.info = function(msg){
  Message({
    message: msg,
    showClose: true,
  })
}
Message.warning = function(msg){
  Message({
    message: msg,
    type: 'warning',
    showClose: true,
  })
}
Message.error = function(msg){
  Message({
    message: msg,
    type: 'error',
    showClose: true,
  })
}
Message.success = function(msg){
  Message({
    message: msg,
    type: 'success',
    showClose: true,
  })
}

//或者手动自己加
import { Message } from 'element-ui'
Message({
	message: '提示信息',
  type: 'success',
  showClose: true,
})

2.select与子项的关系

如果select的v-model绑定的值和option的value值一样，那么就会显示option的label绑定的值

3.vue 省市区三级联动选择

npm install element-china-area-data -S

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

  1. provinceAndCityData是省市二级联动数据（不带“全部”选项）
  2. regionData是省市区三级联动数据（不带“全部”选项）
  3. provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
  4. regionDataPlus是省市区三级联动数据（带“全部”选项）
  5. "全部"选项绑定的value是空字符串""
  6. CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
  7. TextToCode是个大对象，属性是汉字，属性值是区域码 用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105



省市区三级联动（不带“全部”选项）

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

4.隐藏组件el-scrollbar的使用

纵向滚动条基础使用

使用注意点: el-scrollbar 标签 必须设定高度. 只有包裹内容超过给定高度, 才会出现滚动条

<el-scrollbar style="height:300px">
　　<div>....</div>
</el-scrollbar>

//也可以给 el-scrollbar添加 class 属性.
<el-scrollbar class="height-p-100">
    <div>...</div>
</el-scrollbar>

横向滚动条基础使用

横向滚动条在使用上和纵向滚动条使用的方法一样，只需给 el-scrollbar 标签设定宽度即可,如果包裹内容超出最大宽度就会出现横向滚动条

<el-scrollbar style="width:200px">
　　<div>....</div>
</el-scrollbar>

横向滚动条在使用的时候会有一些问题，主要表现在这几个地方：

问题1: window系统下，使用横向滚动条后标签底部出现原生滚动条

解决方法：给 el-scrollbar 添加一个父级 div，父级 div 设定一个高度值,比如 200px，el-scrollbar 设定 200px + 17px = 217px。如果父级div 高度为 100%， 则 el-scrollbar 的高度为 height: calc( 100% + 17px )

<div style="height:200px">
    <el-scrollbar style="height:217px">
        <div>....</div>
    </el-scrollbar>
</div>

注意事项：el-scrollbar 属于一个底层的公共组建，在 element 的包含的组建中，好多都依赖了这个滚动条组建，所有一般不建议修改原始的CSS样式，如果要修改，可以套一个div，让样式效果只作用在当前标签内

文档：

<el-scrollbar
    wrapClass="class-name"
    viewClass="class-namt"
    wrapStyle="color:'#fff';fontSize:'16px';"
    viewStyle="color:'#fff';fontSize:'16px';"
    :native="false"
    :noresize="true"
    tag="ul"
>
    <div>...</div>
</el-scrollbar>

参数

说明

类型

可选值

默认值

wrapClass

可选参数，容器的样式名

string

-

-

viewClass

可选参数，展示视图的样式名

string

-

-

wrapStyle

可选参数，容器的样式

string

-

-

viewStyle

可选参数，展示视图的样式

string

-

-

native

可选参数，是否使用原生滚动

boolean

-

false

noresize

可选参数，容器大小是否是不可变的

boolean

-

false

tag

可选参数，渲染容器的标签

      

5.el-scrollbar结合el-tabs的监听滚动、跳转锚点

监听滚动条滚动事件

el.scrollTop 滚动的距离,可以读可写

mounted() {
  this.handleScroll()
},
methods: {
  handleScroll() {
    let scrollbarEl = this.$refs.scrollbar.wrap
    scrollbarEl.onscroll = () => {
      if(scrollbarEl.scrollTop > 135) { //el.scrollTop 滚动的距离,可以读可写
        //滚动距离大于135时
      } 
    }
  }
}

跳转锚点

el.scrollTop 滚动的距离,可以读可写

handleTabClick({ name }) {
  //方式1--scrollIntoView滚动元素跳转 （产生视图偏移bug）
  // this.$refs.tabs.$el.querySelector(`#${name}`)?.scrollIntoView({ behavior: 'smooth' })

  //方式2--跳转到元素
  const height = this.$refs.tabs.$el.querySelector(`#${name}`).offsetTop
  let scrollbarEl = this.$refs.scrollbar.wrap
  scrollbarEl.scrollTop = height
}

6.下拉元素随滚动条移动bug

7.无限滚动插件

vue-infinite-loading，这是一个使用在Vue.js中的无限滚动插件，它可以帮助你快速创建一个无限滚动列表。可以使用在移动端和pc。

文档：https://peachscript.github.io/vue-infinite-loading/zh/guide/

8.select组件结合tree的使用 树形结构 下拉框

https://blog.csdn.net/demo_020/article/details/112196118

this.$refs.tree.getCheckedNodes(true, true)

//这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）

//select 下拉框搜索功能配合tree实现值过滤
为el-select添加filterable属性即可启用搜索功能。默认情况下，Select 会找出所有label属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个filter-method来实现。filter-method为一个Function，它会在输入值发生变化时调用，参数为当前输入值。
//触发筛选函数
handleFilter(data) {
  this.$refs.tree.filter(data)
},

在需要对节点进行过滤时，调用 Tree 实例的filter方法，参数为关键字。需要注意的是，此时需要设置filter-node-method，值为过滤函数。
//筛选节点
filterNode(value, data) {
  if (!value) return true
  return data.name.indexOf(value) !== -1
},
<el-form-item label="适用科室" prop="deptLables" ref="deptIds">
            <el-select
              v-model="deptLables"
              filterable
              multiple
              :filter-method="handleFilter"
              @remove-tag="removeTag"
              style="width: 100%;"
              placeholder="请选择"
            >
              <el-option
                :value="form.deptIds"
                style="height: auto; padding: 0;"
              >
                <el-tree
                  :data="dept"
                  :props="defaultProps"
                  show-checkbox
                  ref="tree"
                  node-key="id"
                  default-expand-all
                  @node-click="handleNodeClick"
                  highlight-current
                  current-node-key="node"
                  :default-checked-keys="form.deptIds"
                  :filter-node-method="filterNode"
                  @check="handleChcek"
                >
       </el-tree>
		</el-option>
	</el-select>
</el-form-item>

//script
data
//默认
defaultProps: {
  children: 'deptInner',
    label: 'name',
},
form: {
        bizType: this.type,
        bizWays: [],
        name: '',
        titleIds: [],
        deptIds: [],
        priceDto: [],
        state: 1,
 },
 
methods
   //1.获取科室树形数据
   async getDeptList() {
     const list = await deptChooseList({ tree: true })
     list.forEach(item => {
       item.deptInner && (item.disabled = true)
     })
     this.dept = list
   },
     
   //2.清空选择
      this.deptLables = []
      //清空选项
      this.$refs.tree.setCheckedNodes([])
     
  
     
 		//触发筛选函数
    handleFilter(data) {
      this.$refs.tree.filter(data)
    },
    //筛选节点
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    //点击树节点
    handleNodeClick() {},
    //树节点选中时
    handleChcek() {
      //这里两个true，1. 是否只是叶子节点 2. 是否包含半选节点（就是使得选择的时候不包含父节点）
      const res = this.$refs.tree.getCheckedNodes(true, true)
      this.form.depts = res.map(item => item.id)
      this.form.deptNames = res.map(item => item.name)
    },
    //移除tag
    removeTag(data) {
      let res = this.$refs.tree.getCheckedNodes(true, true)
      //删除tag移除项
      res.forEach((item, index) => {
        item.name === data && res.splice(index, 1)
      })
      this.form.depts = res.map(item => item.id)
      //重新设置选中
      this.$refs.tree.setCheckedNodes(this.form.depts)
    },
      
   
      //选中项赋值
      this.$nextTick(() => {
        const res = this.$refs.tree.getCheckedNodes(true, true)
        console.log(res, '选中项')
        this.deptLables = res.map(item => item.name)
        console.log(this.deptLables)
      })

9.自定义上传文件方式

<el-upload
class="upload-demo"
action
:on-change="handleChange"
:on-success="handleSucess"
:http-request="httpRequest"
>
  <el-button size="small" type="primary">点击上传</el-button>
</el-upload>

//data中
 fileData: '',
   
 
//自定义上传函数--文件保存
httpRequest({ file }) {
   const formData = new FormData()
   formData.append('file', file)
   this.fileData = formData
   console.log(file, '文件')
 },
 
//接口请求函数
 async importUsr() {
     this.$message.success('上传成功！')
     await importEmployee(this.fileData)
 },

10.表头添加选项框

 <el-table-column>
            <template slot="header" slot-scope="{}">
              <el-select size="mini" v-model="btnWcno" @change="jend">
                <el-option
                  v-for="item in branch"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </template>
            <template v-slot:default="{ row }">
              <el-row>
                <el-col :span="24">
                  <template>
                    {{ btnWcno == 1 ? row.deptName : row.doctorName }}
                  </template>
                </el-col>
               
              </el-row>
            </template>
          </el-table-column>

11.confirm确认框合适写法

async delList() {
  const confirm = await this.$confirm('是否确认删除？', '提示', {
    type: 'warning',
  })
  if (confirm !== 'confirm') return
  await delList()
},

12.Checkbox-group 复选框使用数据绑定问题

//label 绑定选中值，展示的value放在标签中。
<el-checkbox-group v-model="status">
    <el-checkbox 
        v-for="(value, key) in statusList"
        :key="key"
        :label="key"
    >
        {{ value }}
    </el-checkbox>
</el-checkbox-group>

13.选项绑定为对象

 <el-form-item label="任务类型：" :label-width="labelWidth">
        <el-select
          v-model="type"
          placeholder="任务类型"
          value-key="typeId"
          @change="value => Object.assign(this.formData, value)"
        >
          <el-option
            label="陪护"
            :value="{ typeName: '陪护', typeId: '1' }"
          ></el-option>
          <el-option
            label="陪检"
            :value="{ typeName: '陪检', typeId: '2' }"
          ></el-option>
          <el-option
            label="送标本"
            :value="{ typeName: '送标本', typeId: '3' }"
          ></el-option>
        </el-select>
      </el-form-item>

14.禁用表格部分选项

在 el-table-column type 类型为 selection 组件中，添加 :selectable='方法名'

<el-table :data="tableData" v-loading="loading" max-height="570" stripe :header-cell-style="headerStyle" @selection-change="handleSelectionLeftChange">
   <el-table-column type="selection" width="50" :selectable='selectEnable'>
   </el-table-column>
   <el-table-column prop="appName" label="选择产品" align="center" width="350">
   </el-table-column>
</el-table>


  //禁用多选框函数
  //把 order_status 为 1 的项禁用
selectEnable(row, rowIndex) {
  console.log(row);
  if (row.order_status !== 1) {
    return true
  }
},

15.限制日期选择范围

https://www.cnblogs.com/belongs-to-qinghua/p/11752392.html

16.表格无数据显示-

.el-table /deep/ .el-table__body td .cell:empty::after,
.el-table /deep/ .el-table__body td .cell > span:empty::after,
.el-table /deep/ .el-table__body td .cell .approval:empty::after,
.el-table /deep/ .el-table__body td .cell div:empty::after,
.el-table /deep/ .el-table__body td .cell .line-limit-length:empty::after {
  content: '-';
}