vue3+ts+element-plus项目总结2

用户9914333

发布于 2024-02-05 17:30:56

920

发布于 2024-02-05 17:30:56

文章被收录于专栏：bug收集bug收集

bug收集：专门解决与收集bug的网站

最近，在写vue3 + ts 项目，项目中使用技术点总结2 , 推荐收藏，供开发时使用

el-table的使用

显示checkbox

<el-table-column type="selection"
 width="55" />

2. 显示switch 开关

<el-table-column label="是否归属" width="240">
<template #default="scope">
<el-switch v-model="scope.row.isComm"
   inactive-text="否"
   active-text="是"
  :active-value="1"
  :inactive-value="0"
 /></template></el-table-column>

‍

3.获取选中行的数据

使用 selection-change事件，代码如下：

 <el-table
class="mytable"
        :data="tableData"
        :row-key="enrollId"
        style="width: 100%; margin-top: 30px"
        @selection-change="handleSelectionChange"
      >

‍

 const handleSelectionChange = (val: any) => {
   //val即为checkbox选中的行对应的数据，值为一个数组 
   // 在此方法中进行业务处理
};

‍

4. 显示操作按钮，并给相应的参数

<el-table-column fixed="right" label="操作" width="110">
        <template #default="{ row }">
           <p>
           <el-button size="small"
                 @click="deleteFun(row.Id)"
                 linktype="primary"
                >删除</el-button>
           </p>
         </template>
 </el-table-column>

5. 将对应的数字列，显示成对应的文字信息

可以将整个项目中，对应的数字与文字对应的数据，都写成共用的方法

数据文件，如 common.ts

//公共数据
const Common_Data = {
//学历
    Edu:[
        {value:1, label:"博士"},
        {value:2, label:"研究生"},
        {value:3, label:"本科"},
        {value:4, label:"专科"},
        {value:5, label:"中专"},
        {value:6, label:"高中"}
    ],
    Sex:[
        {value:1, label:"男"},
        {value:2, label:"女"}
    ]

}

export default Common_Data;

‍

组合数据，并暴露公共方法

import Common_Data from "./common";

import Market_Data from "./market";



//组合所有数据

const obj:Object = {

  ...Common_Data,

  ...Market_Data

};

//根据key与对应的数字，返回对应的文字
export function getLabelByKeyAndValue(key:string,value:number){

if(obj.hasOwnProperty(key)){
var subObj:Array<any> = obj[key];
return getLabelByValue(subObj,value);
  }
return "";
}


function getLabelByValue(data:Array<any>,value:number):string{
for(var i=0; i<data.length; i++){
if(data[i].value == value)
       {
return data[i].label;
       }
    }
return "";
}

function getValueByLabel(data:Array<any>,label:string) :number | null{
for(var i=0; i<data.length; i++){
if(data[i].label == label)
       {
return data[i].value;
       }
    }
return null; 
}

‍

el-table组件中使用

<el-table-column prop="stuInfEducation" label="学历">
    <template #default="{ row }"> 
      {{  getLabelByKeyAndValue('Edu',row.stuInfEducation) }}
     </template>
 </el-table-column>

可筛选的下拉列表

Select 组件是否可筛选, 可设置filterable = true 进行筛选

<el-select filterable=true>
</el-select>

import { useRouter } from "vue-router";
const router = useRouter();

const back = ()=>{
  router.go(-1);
}

获取sessionStorage里存储的值

JSON.parse(sessionStorage.getItem("user") ?? '{}').userId;

checkbox的显示

<el-checkbox :label="item.coding" v-model="item.checkAll" style="font-weight:600,color:#000;" :indeterminate="item.isIndeterminate" @change="handleCheckAllChange(item, $event)">
    {{ item.areaName }}
 </el-checkbox>

‍

checkbox有三种状态全选(显示的'√'),选中部分(显示的'-'),全不选(空)

显示对话框

 <el-dialog v-model="控制对话框显示与隐藏的属性" title="对话框标题">
    <el-form >
      <el-form-item label="字段" :label-width="formLabelWidth">
        <el-select
          v-model="属性s"
          placeholder="提示信息">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="2"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="foo">提交</el-button>
      </span>
    </template>
  </el-dialog>

苟有恒 , 何必三更眠五更起

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2024-01-24，如有侵权请联系 cloudcommunity@tencent.com 删除