vue3-element-plus项目可能会用到的一些组件封装
程序员文章站
2024-02-21 17:00:34
...
1.关于图片+文字的封装
<el-col
:span="8"
v-for="(item, index) in main_title"
:key="index"
class="main_title"
>
<img :src="require('../assets/image/icon/' + item.img + '.png')" class="img" />
<div>
<p class="title1">{{ item.text }}</p>
<p class="text1">{{ item.title }}</p>
</div>
</el-col>
main_title: [
{
img: "icon1",
title: "资产总数",
text: "45个"
},
],
2.select选择器的封装
<el-select v-model="form.plan" placeholder="请选择" style="width: 100%" @change="bclxChange">
<el-option
v-for="item in plan_options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
plan_options: [
{
value: "1",
label: "一次性任务",
},
{
value: "2",
label: "计划性任务",
},
],
//选择不同项显示不同内容
bclxChange(selectValue) {
if (selectValue == 1) {
this.show = true;
this.hidden= false;
}
if (selectValue == 2) {
this.show = false;
this.hidden=true;
}
},
3.关于按钮展开或显示内容的封装
<el-from id="searchBox"></el-from>
<el-button
type="text"
style="margin-left: 10px"
id="closeSearchBtn"
@click="closeSearch"
>
{{ word }}
<i
:class="showAll ? 'el-icon-arrow-up ' : 'el-icon-arrow-down'"
></i>
</el-button>
export default {
data() {
return {
showAll:true,
}
},
computed: {
word: function() {
if (this.showAll == false) {
//对文字进行处理
return "展开搜索";
} else {
return "收起搜索";
}
}
},
mounted() {
this.$nextTick(function() {
this.closeSearch();
});
},
methods: {
closeSearch() {
this.showAll = !this.showAll;
var searchBoxHeght = document.getElementById("searchBox");
if (this.showAll == false) {
searchBoxHeght.style.height = 60 + "px";
} else {
searchBoxHeght.style.height = "auto";
}
}
},
}
注意这个一定要加
#searchBox {
overflow: auto;
}
4.表格中加入进度条
<el-table-column property="rate" label="使用率">
<template #default="scope">
<el-progress
type="line"
:text-inside="true"
:percentage="scope.row.progress"
:color="scope.row.color"
:stroke-width="24"
></el-progress>
</template>
</el-table-column>
tableData: [
{
progress: 50,
color: "red",
},
],
5.element-plus表单中input框和select框等宽等长
//直接在el-select中加入style="width: 100%"
<el-select style="width: 100%" > </el-select>
6.表格中的序号按照顺序排列
<el-table-column type="index" label="序号" width="50" :index="indexMethod"> </el-table-column>
methods: {
indexMethod(index) {
return index + 1 + (this.currentPage - 1) * this.pageSize;
},
}
7.表格中加入开关控制按钮
<el-table-column label="生效配置">
<template #default="scope">
<el-switch
v-model="scope.row.status"
active-color="#13ce66"
inactive-color="#ff4949"
/>
</template>
</el-table-column>
tableData: [
{
status: true,
},
],
上一篇: FastCGI模式下运行php7
下一篇: Resin4配置