vue+element知识

weixin_42102023

已于 2022-09-30 10:32:58 修改

阅读量396

点赞数

文章标签： vue.js 前端 javascript

于 2022-09-06 10:34:48 首次发布

本文链接：https://blog.csdn.net/weixin_42102023/article/details/126719221

版权

一、过滤器

写法

vue自带的过滤器
（1）capitalize:首字母大写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            {{message | capitalize}}
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: "abc"
                }
            })
        </script>
    </body>
</html>

执行结果:Abc
（2）uppercase:全部功能大写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            {{message | uppercase}}
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: "abc"
                }
            })
        </script>
    </body>
</html>

执行结果：ABC
(3) lowercase:全部小写

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            {{message | lowercase}}
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: "ABC"
                }
            })
        </script>
    </body>
</html>

执行结果：abc
(4)currency:输出金钱以及小数点

参数：
参数{Number}[小数位]- 默认值：2
参数{String}[货币符号]-默认值是：$

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            {{message | currency}} <!--输出$123.47-->
            {{message | currency '¥' "1"}} <!--输出$123.5-->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: "123.4673"
                }
            })
        </script>
    </body>
</html>

（5）pluralize：如果只有一个参数，复数形式只是简单地在末尾加一个“s”,如果有多个参数，参数被当做一个字符串数组，对应一个，两个，三个复数词，如果值的个数多余参数的个数，多出的使用最后一个参数。
参数：{String} single, [double, triple, …

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
        {{message}}    {{message | pluralize 'item'}} <!--输出: 1 item-->
        
            <ul v-for="item in lili">
                <li>
                    {{item}}    {{item | pluralize 'item'}} 
                    <!--输出: 1 item   2 items   3 items-->
                </li>
            </ul>
            
            <ul v-for="item in lili">
                <li>
                    {{item}}    {{item | pluralize 'st' 'rd'}} 
                    <!--输出: 1    st 2    rd 3    rd-->
                </li>
            </ul>
            
            <ul v-for="item in man">
                <li>
                    {{item}}    {{item | pluralize 'item'}}
                     <!--输出: 1    item 2    items 3    items-->
                </li>
            </ul>
            
            <ul v-for="item in man">
                <li>
                    {{item}}    {{item | pluralize 'st' 'rd'}} 
                    <!--输出: 1    st 2    rd 3    rd-->
                </li>
            </ul>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    message: 1,
                    lili: [1,2,3],
                    man: {
                        name1: 1,
                        name2: 2,
                        name3: 3
                    }
                }
            })
        </script>
    </body>
</html>

（6）debounce:需要在@里面使用
参数：{Number}[wait]:默认值300
功能：包装处理器,延迟执行 xms，默认延迟300ms。包装后的处理器在调用后至少将延迟xms,如果在延迟结束前再次调用，延迟时长重置为xms

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
          <button id="btn" @click="disappear | debounce 10000">点击我,我将10秒后消失</button>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                methods: {
                    disappear: function () {
                       document.getElementById("btn").style.display= "none";
                    }
                }
            })
        </script>
    </body>
</html>

(7)limitBy：需要咋v-for(即数组)里面使用
参数：第一个参数{Number}取得数量
第二个参数{Number}取得偏移量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <ul v-for="item in lili | limitBy 10"> <!--输出1 2 3 4 5 6 7 8 9 10-->
                <li>{{item}}</li>
            </ul>
            <ul v-for="item in lili | limitBy 10 3">
            <!--输出 4 5 6 7 8 9 10 11 12 13-->
                <li>{{item}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    lili: [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]
                }
            })
        </script>
    </body>
</html>

（8）filterBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: {String | Function} 需要搜索的字符串

第二个参数: in (可选,指定搜寻位置)

第三个参数: {String} (可选,数组格式)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <ul v-for="item in lili | filterBy 'o' "> <!--输出oi oa lo ouo oala-->
                <li>{{item}}</li>
            </ul>
            
            <ul v-for="item in man | filterBy 'l' in 'name' "> <!--输出lily lucy-->
                <li>{{item.name}}</li>
            </ul>
            
            <ul v-for="item in man | filterBy 'l' in 'name' 'dada' ">
             <!--输出lily+undefined lucy+undefined undefined+lsh-->
                <li>{{item.name+"+"+item.dada}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    lili: ["oi", "oa", "ll", "lo" ,"ouo" ,"kk" ,"oala"],
                    man: [   //此处注意man是数组,不是对象
                    {name: "lily"},
                    {name: "lucy"},
                    {name: "oo"},
                    {dada: "lsh"},
                    {dada: "ofg"}
                    ]
                }
            })
        </script>
    </body>
</html>

（9）orderBy

(1)限制:需在v-for(即数组)里面使用

(2)三个参数:

第一个参数: {String | Array | Function} 需要搜索的字符串

第二个参数: {String} 可选参数 order 决定结果升序（order >= 0）或降序（order < 0）,默认是升序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Vue自带的过滤器</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,
        minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>    
        <div class="test">
            <!--遍历数组-->
            <ul v-for="item in lili | orderBy 'o' 1"> <!--输出kk ll oi-->
                <li>{{item}}</li>
            </ul>
            
            <ul v-for="item in lili | orderBy 'o' -1"> <!--输出oi ll kk-->
                <li>{{item}}</li>
            </ul>
            
            <!--遍历含对象的数组-->
            <ul v-for="item in man | orderBy 'name' 1"> <!--输出Bruce Chuck Jackie-->
                <li>{{item.name}}</li>
            </ul>
            
            <ul v-for="item in man | orderBy 'name' -1"> <!--输出Jackie Chuck Bruce-->
                <li>{{item.name}}</li>
            </ul>
            
            <!--使用函数排序-->
            <ul v-for="item in man | orderBy ageByTen"> <!--输出Bruce Chuck Jackie-->
                <li>{{item.name}}</li>
            </ul>
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el: ".test",
                data: {
                    lili: ["oi", "kk", "ll"],
                    man: [   //此处注意man是数组,不是对象
                  {
                    name: 'Jackie',
                    age: 62
                  },
                  {
                    name: 'Chuck',
                    age: 76
                  },
                  {
                    name: 'Bruce',
                    age: 61
                  }
                ]
                },
                methods: {
                    ageByTen: function () {
                        return 1;
                    }
                }
            })
        </script>
    </body>
</html>

过滤器：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  {{ message | capitalize }}
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
	message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
      //取value的第一个字符，并将其转换成大写 加上去掉一个字符串的后部分
      //value.slice(i) 从1开始数
      //value.charAt(i) 从0开始数
    }
  }
})
</script>
</body>
</html>

二、vue关闭当前页、关闭当前标签tagsView
1.移除visitedView和cachedView中的当前项
2.跳转到最后一次的访问标签
实现方式
（1）在vue页面直接实现

closePage()
      var currentView = this.$store.state.tagsView.visitedViews[0]
      for (currentView of this.$store.state.tagsView.visitedViews) {
        if (currentView.path === this.$route.path) {
          break
        }
      }
      this.$store.dispatch('tagsView/delView', currentView)
        .then(({ visitedViews }) => {
          if (currentView.path === this.$route.path) {
            const latestView = this.$store.state.tagsView.visitedViews.slice(-1)[0]
            if (latestView) {
              this.$router.push(latestView)
            } else {
              // 如果没有其他标签则跳转到首页
              if (currentView.name === '首页') {
                this.$router.replace({ path: '/redirect' + currentView.fullPath })
              } else {
                this.$router.push('/')
              }
            }
          }
        })

(2)、在js文件写自定义函数，在vue 页面中调用

import router from '@/router/routers'
 
// 关闭当前页 关联tagView
export function closePage(store, route) {
  var currentView = store.state.tagsView.visitedViews[0]
  for (currentView of store.state.tagsView.visitedViews) {
    if (currentView.path === route.path) {
      break
    }
  }
  store.dispatch('tagsView/delView', currentView)
    .then(({ visitedViews }) => {
      if (currentView.path === route.path) {
        const latestView = store.state.tagsView.visitedViews.slice(-1)[0]
        if (latestView) {
          router.push(latestView)
        } else {
          if (currentView.name === '首页') {
            router.replace({ path: '/redirect' + currentView.fullPath })
          } else {
            router.push('/')
          }
        }
      }
    })
}

<el-button plain type="primary" size="mini" @click="goBack">返回</el-button>
 /* 返回 */
    goBack(){
      this.$store.dispatch("tagsView/delView", this.$route),//删除当前页签
      this.$router.go(-1)  //跳转到上一级目录
    }

三、使用Element时默认勾选表格toggleRowSelection

在页面初始化加载时，讲表格中某行默认选中
使用方法：toggleRowSelection

方法名	说明
toggleRowSelection	用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

 <el-table
        ref="multipleTable"
        :data="doctorList"   //接收的数据参数
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionDoctorChange"  //多行选中数据
        v-loading="doctorloading"   //加载
      >
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column label="姓名" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.name }}</template>
        </el-table-column>
        <el-table-column label="性别" width="120" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.gender == 1
                  ? 'success'
                  : scope.row.gender == 2
                  ? 'danger'
                  : ''
              "
              >{{
                scope.row.gender == 1 ? "男" : scope.row.gender == 2 ? "女" : ""
              }}</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="身份证号" width="" align="center">
          <template slot-scope="scope">{{ scope.row.idcard }}</template>
        </el-table-column>
        <el-table-column label="所属医院" width="120" align="center">
          <template slot-scope="scope">{{ scope.row.affhospital }}</template>
        </el-table-column>
        <el-table-column label="医生类型" width="120" align="center">
          <template slot-scope="scope">
            <el-tag
              :type="
                scope.row.doctype == 1
                  ? 'success'
                  : scope.row.doctype == 2
                  ? 'danger'
                  : ''
              "
              >{{
                scope.row.doctype == 1
                  ? "医生"
                  : scope.row.doctype == 2
                  ? "专家"
                  : ""
              }}</el-tag
            >
          </template>
        </el-table-column>
      </el-table>

注意：1、注意el-table上有一个ref="multipleTable"的属性
2、toggleRowSelection（row，selected）接受两个参数，row传递被勾选的数据行，selected 设置是否被选中

methods:{
//查询列表数据方法
   async getDoctorList() {
      this.lookOpen = true;  //让当前窗口处于打开状态
      this.doctorloading = true; 
      listAllDoctor(this.queryParamsDoc).then((response) => {
        this.doctorList = response.rows;
        this.doctotal = response.total;   //统计总数
        this.doctorloading = false; 
        let checkIndex;  //定义一个变量
       this.doctorList.filter((v,index)=>{ if(v.id==this.doctorId){
      //过滤doctorList[]里面的数据，让里面的判断里面的id是否相等
        checkIndex = index
       }})
       //选中当前id的数据
        this.$nextTick( ()=> {
    this.$refs.multipleTable.toggleRowSelection(this.doctorList[checkIndex],true);
        })
      });
    },
}

多行选中数据

 // 专家医生多选框选中数据
    handleSelectionDoctorChange(selection) {   
      this.doctorData = selection.filter((item) => item);
      //如果当前数的长度不为1则为true
      this.singleDoctor = this.doctorData.length !== 1;
      this.multipleDoctor = !selection.length;
    },

四、选项卡切换

<el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        v-for="item in tabOption"
        :key="item.value"
        :label="item.label"
      >
      </el-tab-pane>
</el-tabs>


exoprt default {
data(){
return {
 activeName: "0",//默认选项卡，默认为0
      tabOption: [
        {
          value: "0",
          label: "预约中",
        },
        {
          value: "1",
          label: "已逾期",
        },
        {
          value: "2",
          label: "已满员",
        },
      ],
},
methods:{
/* 选项卡切换 */
    handleClick(row) {
    //queryParams.state的状态为1、2、3，activeName默认值为0，所以讲this.activeName转化为数字
      this.queryParams.state = Number(this.activeName) + 1;
     //查询的数据
      this.getList();
    },
}
}