elementplus

JingHiraeth

已于 2023-12-08 17:08:24 修改

阅读量2.6k

点赞数 2

分类专栏：前端文章标签： vue.js elementui javascript

于 2023-09-17 17:11:21 首次发布

本文链接：https://blog.csdn.net/a5120184120/article/details/132941838

版权

前端专栏收录该内容

23 篇文章 0 订阅

订阅专栏

一、el-input

1、更改背景颜色

/deep/ .el-input__wrapper {
  background: #F2F3F5;
}
 /deep/ .el-input__inner {
  background: #F2F3F5;
  color: #86909C;
}

2、限制字数，增加行数

在这里插入图片描述

3、去除边框

/deep/ .el-input__wrapper {
  box-shadow: none;
}

4、设置textarea不显示右下角样式

::v-deep .el-textarea__inner{ 
  resize: none;  
}

二、el-table

1、动态设置某项的显示与背景颜色

在这里插入图片描述

<el-table-column
 prop="State"
 label="测试"
>
  <template #default="{row}">
    <div
      class="freeBox"
      :style="StatusClass(row)"
    >
      <span>{{ Status(row) }}</span>
    </div>
  </template>
</el-table-column>

// 判断结束方式状态颜色
const StatusClass=(row) => {
    let color = '';
    let background = '';
    if (row.State === '1') {
        color='color:#00B42A';
        background='background: #E1FFED';
    } else if (row.State === '0') {
        color='color:#FF852C';
        background='background: #FFF5E1';
    }
    return `${color};${background}`;
};
//判断结束方式格式
const Status=(row) => {
    let data = '';
    if (row.State === '1') {
        data = '• 在用';
    } else if (row.taskState === '0') {
        data = '• 停用';
    }
    return data;
};

2、动态显示操作按钮

在这里插入图片描述

<el-table-column
   label="操作"
 >
   <template #default="{row}">
     <el-button
       size="small"
       class="btn2"
       @click="stopUsing(row)"
       v-if="row.taskState === '1'"
     >
       停用
     </el-button>
     <el-button
       size="small"
       class="btn3"
       @click="startUsing(row)"
       v-if="row.taskState === '0'"
     >
       启用
     </el-button>
   </template>
 </el-table-column>

3、表头列宽不够而并不换行

未解决

4、代码控制选中与否

如有清除需要

exportData.value.clearSelection()

关键toggleRowSelection(item,boolean)

exportData.value.forEach((item)=>{
	if (item.Status === '不可选'){
        MedicineManageRef.value.toggleRowSelection(item, false);
    }
})

5、修改或清除element-plus表格边框和底部边框

参考

6、el-table-column限制长度二十个汉字，多的省略号

<el-table-column
      prop="roleDescription"
      label="角色说明"
      align="left"
      width="350"
    >
      <template #default="scope">
        <div class="ellipsis-text" :title="scope.row.roleDescription">
          {{ limitString(scope.row.roleDescription, 20) }}
        </div>
      </template>
</el-table-column>

.ellipsis-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 20em; /* 10个汉字的宽度 */
 }

methods: {
  const limitString = (str, limit) => {
       if (str.length > limit) {
           return `${str.substring(0, limit) }...`;
       }
       return str;
  };
}

7 、样式区分行

参考

三、el-dialog

1、居中

.dialog_box {
  ::v-deep .el-dialog{
  	width:40%;
    height:25vh;
    display: flex;
    flex-direction: column;
    margin:0 !important;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    max-height:calc(100% - 30px);
    max-width:calc(100% - 30px);
  }
  ::v-deep  .el-dialog .el-dialog__body{
    flex:1;
    overflow: auto;
  }
}

2、show-close

问题：

当使用show-close的时候，仅仅只是写show-close = “false”不起作用，当写:show-close="true"的时候才起作用

解决：

这是因为在Vue中，属性需要使用v-bind指令（或简写的冒号）来绑定动态的数据。当你使用show-close="false"时，Vue会将false解析为一个字符串，并将其作为静态属性传递给对话框组件，因此它不会起作用。
而当你使用v-bind指令或冒号来绑定属性时，Vue会将表达式的结果作为动态属性传递给对话框组件，因此可以正确地控制是否显示关闭按钮。在这种情况下，:show-close="false"会将false作为一个布尔值传递给对话框组件，从而正确地设置是否显示关闭按钮。
所以，正确的方式是使用v-bind指令或冒号来绑定show-close属性，如：:show-close=“false”。这样可以确保属性的值被正确地解析为布尔类型，从而实现预期的功能。

3、设置样式

//弹框头部
::v-deep .el-dialog__header {
  --el-text-color-primary: #1EFFFF;
  --el-text-color-regular: #fff;
  padding: 0 !important;
  width: 100%;
  height: 60px;
  background: linear-gradient(90deg, #7795FF 0%, #588BFF 42%, #7795FF 83%, #3C77FF 100%);
}
//弹框标题
::v-deep .el-dialog__title {
  color: #fff;
  font-size: 20px;
  line-height: 60px;
  display: flex;
  justify-content: center;
}
//弹框body
::v-deep .el-dialog__body {
  padding: 15px 20px!important;
  color:#fff;
}
//弹框footer
  ::v-deep .el-dialog__footer {
    position: absolute;
    bottom: 10px;
    right: 35px;
  }

4、带标题对话框圆角

::v-deep .el-dialog {
   border-radius: 8px 8px 8px 8px;
 }
 //弹框头部
 ::v-deep .el-dialog__header {
   border-radius: 8px 8px 0px 0px;
   ...
 }

5、el-dialog中的组件在弹框消失的时候没有卸载

在el-dialog中有子组件，在onMounted中有定时器，在onBeforeUnmount的时候清除定时器，但是定时器清除并未生效，发现没有子组件在弹框消失的时候没有卸载
solve：在el-dialog添加属性destroy-on-close

有坑
参考

四、el-pagination

随浏览器高度而更改，而不是固定死

  //表格
  .table_box{
    padding-top: 5px;
    flex:1;
    overflow-y: auto;
    background-color: #FFFFFF;
    height: calc(100% - 95px);
  }
  //分页
  .pagination_box{
    margin: 10px 20px 0 0;
    .pagination{float: right;}
  }

五、el-date-picker

1、设置只不可选择今天之后的日期，且置灰

不知道为啥禁用样式单独写出来才生效。写在表单或布局样式里面就失效了

<el-date-picker
   v-model="value"
   type="date"
   placeholder="请选择"
   format="YYYY/MM/DD"
   :disabled-date="disabledDate"
 >
   <template #default="cell">
     <div
       class="cell"
       :class="{ current: cell.isCurrent , disabled: disabledDate(cell.date) }"
     >
       <span class="text">{{ cell.text }}</span>
     </div>
   </template>
 </el-date-picker>

 //日期选择控制
    const disabledDate = (time) => time.getTime() > Date.now() ;
    // 添加一个新的方法来检查日期是否禁用
    const isDateDisabled = (date) => {
      const time = new Date(date.getFullYear(), date.getMonth(), date.getDate());
      return disabledDate(time);
    };

//禁用样式
.el-date-picker .cell.disabled {
  background-color: #f5f7fa;
  color: #ccc;
}

2、改变图标icon位置居右

参考

3、清除小图标与Svg重叠不生效

当最后的自定义SvgIcon图标和它自带的清除小图标重叠的时候，清除小图标在原位置划过，点击不生效
solve：pointer-events: none，使SvgIcon不响应鼠标事件
在这里插入图片描述

 <div class="dateBox">
    <el-date-picker
      v-model="date"
      type="datetimerange"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD HH:mm:ss"
      style="width: 211px; height: 32px;"
      :start-placeholder="$t('common.DateCommenced')"
      :end-placeholder="$t('common.endDate')"
      @change="monthSearch"
    />
    <SvgIcon
      icon-class="rili-4 1"
      style="width: 20px; height: 20px;margin-top: 3px;position:absolute;right: 8px;top: 13px;pointer-events: none;"
      class-name="data_icon"
    />
</div>

六、el-form

表单中根据证件类型不同对证件号码进行校验
参考
 参考
elementplus表单中根据证件类型不同，为证件号码设置不同的正则验证规则，可以成功，但是当选择了证件类型，输入了证件号码之后，又重新选择证件类型，因为证件号码的验证时blur时触发，故此时的证件号码不满足此证件类型的验证，用watch

const rules = reactive({
	idNumber: [
        { required: true, message: '请输入有效证件号码', validator: validatorIdNumber, trigger: 'blur' }
      ],
});

const validatorIdNumber = (rule, value, callback) => {
      if (!value) {
        return new Error('请输入身份证号');
      }
      let reg = '';
      if (data.value.idType === _this.$t('common.IdentityCard')) {
        reg = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[0-2])(([0-2][1-9])|10|20|30|31)\d{3}(\d|X|x)$/;
      } else if (data.value.idType === _this.$t('common.FamilyRegister')) {
        reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
      } else if (data.value.idType === _this.$t('common.passport')) {
        reg = /^([a-zA-z]|[0-9]){5,17}$/;
      } else if (data.value.idType === _this.$t('common.DrivingLicense')) {
        reg = /^ [0-9] {12}$/;
      } else if (data.value.idType === _this.$t('common.HongKongAndMacauPass')) {
        reg = /^([A-Z]\d{6,10}(\(\w{1}\))?)$/;
      } else if (data.value.idType === _this.$t('common.TaiwanPass')) {
        reg = /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/;
      } else if (data.value.idType === _this.$t('common.StudentID')) {
        reg = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])([0-2][1-9]|10|20|30|31)\d{3}[0-9Xx]$/;
      } else {
        callback();
      }
      const card = reg.test(value);
      if (!card) {
        callback(new Error('请输入有效证件号码'));
      } else {
        callback();
      }
    };

watch(() => data.value.idType, () => {
      idNumberRef.value.clearValidate();
      nextTick(() => {
        validatorIdNumber(data.value.idNumber);
      });
    }, { deep: true } );

七、el-autocomplete

1、自动补全输入框设置只能选择所提供的选择项

<el-form-item>
      <el-autocomplete
          v-model="taskData.driver"
          :fetch-suggestions="queryDriver"
          debounce="500"
          @select="selectDriverId"
          @change="limitDriver"
          />
 </el-form-item>

//将接口获取的所选项保存
const drierList = ref();
// focus调接口
const queryDriver = async (queryString, cb) => {
      //存储并格式化查询返回数据，适配el-autocomplete列表所需格式
      const result=[];
      let timeout;
      await BusinessScheduleApi.queryDriver({}, {
        licensePlate: taskData.licensePlate
      }).then((res) => {
        result.push({
          value: res.body.driverName,
          id: res.body.id
        });
        drierList.value = result;
        //防抖
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          // 回调展示数据
          cb(result);
        }, 1000 * Math.random());
      });
 };
 //选择时
 const selectDriverId = (item) => {
      console.log(item);
      taskData.driverID = item.id;
 };
 //做限制
 const limitDriver = () => {
      if (!drierList.value.some((item) => item.value === taskData.driver)) {
        taskData.driver = '';
        ElMessage.error('请选择提供的选择项');
      }
 };

2、当用户输入而不是点击选择,获取值

const limitOrganization = () => {
     if !organizationList.value.some((item) => item.value === addOrNewData.hospitalName)) {
        addOrNewData.hospitalName = '';
        ElMessage.error('请选择提供的选择项');
     } else {
         const selectedOrganization = organizationList.value.find((item) => item.value === addOrNewData.hospitalName);
         selectOrganizationType.value = selectedOrganization.type;
      }
};

八、el-switch

在改变状态之前弹出对话框，确认才修改
参考

九、el-select

el-select两个下拉框实现二级联动
参考
 参考

//两个下拉框的子集关系
    const subRelation = () => {
      primaryDiagnosisMore.value = [];
      data.initialDiagnosisMore = '';
      for (const i of primaryDiagnosis.value){
        console.log('i', i);
        if (data.initialDiagnosis === i.typeName) {
          primaryDiagnosisMore.value = i.children;
        }
      }
    };

十、el-cascader

级联选择器的options是后端返回的数据，不匹配value，label

<el-cascader
    :options="InitialDiagnosisType"
    :show-all-levels="false"
    v-model="data.InitialDiagnosis"
    :props="InitialDiagnosisProps"
/>

const InitialDiagnosisProps = ref({
    value: 'category',
    label: 'category',
    children: 'childNode'
});