elementUI

最新推荐文章于 2024-07-11 09:55:55 发布

明阳mark

最新推荐文章于 2024-07-11 09:55:55 发布

阅读量223

点赞数

CC 4.0 BY-SA版权

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/qq_36939013/article/details/96482559

vue 专栏收录该内容

32 篇文章

订阅专栏

本文主要介绍了如何在Element UI中实现动态手风琴标题，并讲解了时间控件、下拉框控件、级联选择器、数字输入框及弹框控件的使用。特别强调了在修改数据时，不应直接操作store，而应通过调用store的函数确保数据同步。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手风琴的title想变为动态的，不能用普通方法
手风琴title动态

<el-collapse-item :title="warningAlertTile">
  <WarningAlertList/>
 </el-collapse-item>

js里面的写法

 warningAlertTile(){
   let warningAlertCount = this.warningAlerts.length;
   return `预报警(${warningAlertCount})`;
 }

会报错function () { [native code] }

修改：
使用get函数就行

get warningAlertTile(){
   let warningAlertCount = this.warningAlerts.length;
   return `预报警(${warningAlertCount})`;
 }

时间控件

可以选择日期的控件

 <el-row slot="middle" class="xhrow" :span="21">
         <el-card>
              <div slot="header">
                <div class="block">
                  <el-date-picker
                    :value="currentMon"
                    type="month"
                    @input="changeTime"
                    placeholder="选择月">
                  </el-date-picker>
                </div>
            </div>
            <GridChiefLogger/> 
         </el-card>
      </el-row>

这里不能直接去改store的值，需要调store的函数去改，改了其他地方也就改了

  changeTime(newMon: Date){
    let newMonStr = moment(newMon).format("YYYY-MM")
    this.changeCurrentMon(newMonStr)
  }

下拉框控件

 <el-form-item label="级别" prop="grade">
    <el-select v-model="editPilot.grade" @change="changeSelect">
        <el-option
            v-for="option in options"
            :key="option.value"
            :value="option.value"
            :label="option.label"
        ></el-option>
    </el-select>
</el-form-item>

editPilot: Pilot = newPilot([]);
options: any = [
   {
        value: "BVLOS",
        label: "视距内驾驶员"
    },
    {
        value: "VLOS",
        label: "超视距驾驶员"
    },
    {
        value: "INSTRUCTOR",
        label: "教员"
    },
];

动态下拉框控件

<el-select v-model="districtSelected" class="selectCss">
  <el-option
        v-for="item in districtList"
        :key="item.id"
        :label="item.name"
        :value="item.code"
    ></el-option>
</el-select>

@Getter districtList!: District[];

changeSelect(grade: string) {
   this.editPilot.grade = grade
 }

级联选择器

 <el-form-item label="应急队：" prop="targetTeamIds">
    <el-cascader
        :options="options"
        @change="handleChange"
    ></el-cascader>
</el-form-item>

get options() {
     let districts: District[] = [];
     let teams: EmergencyTeam[] = this.emergencyTeams;

     if (this.districts.length > 0) {
         districts = this.districts[0].children;
     } else {
         return [];
     }

     return districts.map(d => {
         let ts = teams
             .filter(t => t.districtCode == d.code)
             .map(t => {
                 return {
                     value: t.id,
                     label: t.name
                 };
             });
         return {
             value: d.code,
             label: d.name,
             children: ts
         };
     });
 }

数字输入框

 <el-input-number
  type="number"
    v-model="editCamera.lng"
    :max="180"
    :controls="false"
    autocomplete="off"
/>

弹框控件

 <ul class="darkul">
    <li v-for="(patrolEvent) in filteredPatrolEvents" :key="patrolEvent.id" >
      <el-alert
        title="应急事件"
        type="error"
        effect="dark"
        v-if="patrolEvent.severity==100"
      ><a  @click="openEmergency(patrolEvent)">{{patrolEvent.issue}}</a></el-alert>
    </li>
  </ul>

 @Getter patrolEventList!: PatrolEvent[];
  get filteredPatrolEvents() {
    if (this.patrolEventList.length > 0) {
      return this.patrolEventList.filter(d => d.id != null);
    } else {
      return [];
    }
  }
  openEmergency(patrolEvent: PatrolEvent) {
    window.location.href =
      "/grid_patrol/patrol_event_emergency?eventId=" + patrolEvent.id;
  }

strore.js

 patrolEventList(state) {
      let selectList = state.patrolEvents.filter((event: PatrolEvent) => {
        let isDistrict = true
        let isType = true
        if (state.searchParams.districtCode !== state.rootDistrictCode) {
          isDistrict = event.location.districtCode === state.searchParams.districtCode
        }
        if (state.searchParams.eventType !== "All") {
          isType = event.source.type === state.searchParams.eventType
        }
        return isDistrict && isType
      })
      return selectList
    },

具体效果
在这里插入图片描述

记一下

<template>
        <el-table :data="logs" border="border">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="gridName" label="所属网格"></el-table-column>
            <el-table-column prop="districtName" label="所属行政区"></el-table-column>
            <el-table-column prop="gridChiefName" label="姓名"></el-table-column>
            <el-table-column prop="attendDays" label="出勤天数"></el-table-column>
            <el-table-column
                v-for="(column, index) in userTableColumns"
                :key="index"
                :label="column.title"
                :prop="column.prop"

            >
             <template slot-scope="scope">
                <el-tag  type="warning" v-if="getColumn(scope.row.details, column.prop) == '请假'">{{getColumn(scope.row.details, column.prop)}}</el-tag>
                <el-tag  type="primary" v-else-if="getColumn(scope.row.details, column.prop) == '√'">{{getColumn(scope.row.details, column.prop)}}</el-tag>
                <el-tag  type="danger" v-else >{{getColumn(scope.row.details, column.prop)}}</el-tag>
            </template>
            </el-table-column>
        </el-table>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
import _ from "lodash";
import moment, { Moment } from "moment"
import { District } from "@/@types/District";
import { GridChiefAttendLog, GridChiefState, AttendDetail } from '@/@types/patrol/grid/log/GridChiefAttendLog';
import { PatrolGrid, fetchGrids} from '@/@types/patrol/grid/PatrolGrid';


@Component({
  components: {
  }
})
export default class GridChiefLogger extends Vue {
    @State gridChiefLogs!: GridChiefAttendLog[];
    @State grids!: PatrolGrid[];
    @State from!: Moment;
    @State to!: Moment;
    @State districts!: District[];

    getValue(str:string){
        return str.slice(str.indexOf(".")+1)
    }
    getColumn(str:any, str2: any){
        let value = this.getValue(str2)
        return str[value]
    }

    get logs(){
        return this.gridChiefLogs.map(g =>{
            return {
                id: g.id,
                gridName: this.grids.find(f => f.id == g.gridId)!.name,
                gridChiefName: g.gridChiefName,
                districtName: this.districts[0].children.find(d =>d.code == g.districtCode)!.name,
                attendDays: g.details.filter(d => d.state == GridChiefState.ATTEND).filter(g => g.hasComplete == true).length,
                details: this.formatDtails(g.details)
            }
        })
    }

    //封装details
    formatDtails(details: AttendDetail[]){
        let formatObj:any = {};
        for(let i = 0; i<details.length; i++){
            let currentDetail = details[i];
            let date = currentDetail.date;
            let status = this.getStatus(currentDetail);
            formatObj[date] = status
        }
        return formatObj;
    }
    //获取状态
    getStatus(detail: AttendDetail){
        if(detail.state == GridChiefState.LEAVE){
            return `请假`
        }else if(detail.state == GridChiefState.ATTEND && detail.hasComplete == true){
            return "√"
        }else{
            return "缺勤"
        }
    }

    get userTableColumns() {
        let current = this.from.clone()
        let columns: { title: string, prop: string }[] = []

        while(current.isBefore(this.to)) {
            columns.push({
                title: `${current.date()}日`,
                prop: `details.${current.format("YYYY-MM-DD")}`
            })
            current = current.clone().add(1, "day")
        }
        return columns;
    }
}
</script>

动态表格高级操作

<template>
    <el-table :data="tableData" border="border">
        <el-table-column prop="time" label="时间"></el-table-column>
        <el-table-column prop="lng" label="经度"></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>
        <el-table-column prop="alt" label="高度"></el-table-column>
        <el-table-column
                v-for="(column, index) in userTableColumns"
                :key="index"
                :label="column.title"
                :prop="column.prop"
        >
            <template slot-scope="scope">
                {{foramtNum(scope.row, column.newProp, column.percision)}}
            </template>
        </el-table-column>
    </el-table>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import { State, Getter, Action, Mutation, namespace } from "vuex-class";
import _ from "lodash";
import moment from "moment"
import { FlightTaskTrace } from '@/@types/flight/task/FlightTaskTrace';
import { Object } from 'ol';
import { FlightTask, saveFlightTask, fetchFlightTasks, deleteFlightTask } from '@/@types/flight/task/FlightTask';
import { DronePayloadType, fetchDronePayloadTypes } from '@/@types/flight/drone/DronePayloadType';

@Component({
    components: {
    }
})
export default class FlightTraceList extends Vue {
    
    @State traces!: FlightTaskTrace[];
    @State flightTasks!: FlightTask[];
    @State payLoadTypes!: DronePayloadType[];
    @State taskId!: number;

    get tableData(): any{
        return  _.map(this.traces, f =>{
            return {
                taskId: f.taskId,
                time: moment(f.timestamp).format("YYYY-MM-DD HH:mm"),
                lat: f.lat,
                lng: f.lng,
                alt: f.alt,
                readings: f.readings
            }
        });
    }

    foramtNum(obj:any, param:string, percision: number = 0){
        return obj["readings"][param].toFixed(percision)
    }


    get userTableColumns(){
        if(this.flightTasks.length == 0) {
            return []
        }
        let currentPayLoads = this.flightTasks.find(f=>f.id == this.taskId)!.payloads
        return currentPayLoads.flatMap((p)=>{
            if(p.liveReadingDefinitions == null) {
                return []
            }
            return p.liveReadingDefinitions.map(d=>{
                return {
                    title: d.name,
                    prop: `readings.${d.index}`,
                    newProp: d.index,
                    percision: d.percision
                }
            })
        })
    }
}
</script>
<style>
</style>