组件使用
<template>
<div class="Test">
<!-- 顶部按钮 -->
<div class="header">
<el-button type="primary"
size="mini"
class="searchBtn"
@click="search">
高级搜索
<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
</div>
<!-- 搜索配置 -->
<div class="search">
<vueSearch :formItem="searchItem"
ref="vueSearch"
:formHandler="form_handler"
:formData="searchInfo"></vueSearch>
</div>
<!-- 列表 -->
<div class="list">
<div class="tab">
<el-table ref="tableList"
:data="table.data"
tooltip-effect="dark"
border
fit
size="mini">
<el-table-column show-overflow-tooltip
v-for="item in table.columns"
:key="item[table.key]"
:prop="item.prop"
:label="item.label"
:width="item.width"
:fixed="item.fixed"
:sortable="item.sortable"
:formatter="item.formatter">
</el-table-column>
</el-table>
</div>
<div class="fenye">
<span>共有{{table.total}}条记录 每页{{searchInfo.size}}条</span>
<el-pagination @current-change="searchData"
:current-page.sync="searchInfo.current"
background
@size-change="searchData"
:page-sizes="[20,50,100]"
:small="true"
:page-size.sync="searchInfo.size"
layout=" sizes,prev, pager, next, jumper"
:total="table.total"></el-pagination>
</div>
</div>
</div>
</template>
<script>
import vueSearch from "@/components/Search/serachs";
export default {
name: "Test",
// 初始数据定义处
data () {
return {
//搜索参数配置
searchInfo: {
test1: "",
test2: false,
test3: "",
test4: [],
test5: [],
test6: [],
test7: "",
test8: [],
current: 1,
size: 20,
orderBy: "",
asc: false
},
//参数配置
searchItem: [
{
type: "Input",
label: "输入框:",
prop: "test1"
},
{
type: "Checkbox",
label: "选择框",
prop: "test2",
hint: "",
},
{
type: "Select",
label: "下拉单选:",
prop: "test3",
filterable: true,
options: [
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" },
]
},
{
type: "Selects",
label: "下拉多选:",
prop: "test4",
filterable: true,
options: [
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" },
]
},
{
type: "Selects_page",
label: "下拉分页多选:",
prop: "test5",
classification: "common",//接口文件
dataCustom: "getOrderNum",
url: "getOrderNum",//接口名
singlechoice: false,
search: { size: 20, current: 1, searchValue: undefined },
displayfields: {
id: "value",
name: "value",
listid: "value",
listname: "value",
seach: "searchValue"
},
title: "xxx",
placeholder: "xxx",
columns: [
{ prop: "value", label: "值" },
{ prop: "code", label: "编码" },
]
},
{
type: "Selects",
label: "下拉多选:",
prop: "test6",
filterable: true,
options: [
{ value: 1, label: "选项1" },
{ value: 2, label: "选项2" },
]
},
{
type: "Date",
label: "日期:",
prop: "test7",
dateFormate: "yyyy-MM-dd HH:mm:ss",
timeType: "datetime"
},
{
type: "Time_feame",
label: "时间区间:",
prop: "test8",
dateFormate: "yyyy-MM-dd",
timeType: "daterange"
}
],
//表单按钮配置
form_handler: [
{
label: "重置",
key: "reset",
handler: () => this.resetSearch()
},
{
label: "搜索",
key: "submit",
type: "primary",
handler: () => this.searchData(1)
}
],
// 表格
table: {
key: "id",
data: [],
columns: [,
{ prop: "test1", label: "测试1" },
{ prop: "test2", label: "测试2" },
{ prop: "test3", label: "测试3" },
],
total: 0
},
};
},
// 组件注册
components: {
vueSearch,
},
methods: {
//重置
resetSearch () {
let data = this.$options.data(); //重置组件
this.searchInfo = data.searchInfo; //重置搜索查询信息
this.$refs.vueSearch?.resetselectecho();
},
//搜索
searchData (val) {
val == 1 ? (this.searchInfo.current = 1) : "";
api.bicycleOrder.listInfo(this.searchInfo).then(res => {
this.table.data = res.data ? res.data.records : [];
this.table.total = res.data ? res.data.total : 0;
});
},
}
};
</script>
<style lang="less">
</style>
封装组件:vueSearch文章来源:https://www.toymoban.com/news/detail-480573.html
<template>
<div ref="serch"
class="searchBox">
<div class="left">
<div v-for="item in formItem"
:key="item.prop">
<!-- input -->
<div class="Search-box"
v-show="item.showFlag==false?item.showFlag:true"
v-if="item.type==='Input'">
<span class="title"
:class="classObject(item.required)">{{item.label}}</span>
<div class="box box1">
<el-input size="mini"
:clearable="true"
v-model="formData[item.prop]"
placeholder="请输入"
:style="{width:item.width}"></el-input>
</div>
</div>
<!-- Checkbox -->
<div class="Search-box"
v-show="item.showFlag==false?item.showFlag:true"
v-if="item.type==='Checkbox'">
<div class="box box1">
<el-checkbox v-model="formData[item.prop]">{{item.label}}</el-checkbox>
</div>
<el-tooltip :content="item.hint"
v-if="item.prop=='keySite'"
placement="top">
<span style="display: inline-block; margin-left: 10px;"
class="iconfont icon-gantanhao"></span>
</el-tooltip>
</div>
<!--select 单选-->
<div class="Search-box"
v-show="item.showFlag==false?item.showFlag:true"
v-if="item.type==='Select'">
<span class="title"
:class="classObject(item.required)">{{item.label}}</span>
<div class="box">
<el-select v-model="formData[item.prop]"
:filterable="item.filterable"
:clearable="true"
:disabled="item.disabled"
:placeholder="item.placeholder"
size="mini">
<el-option v-for="select in item.options"
:label="select.label"
:key="select.value+select.label"
:value="select.value"></el-option>
</el-select>
</div>
</div>
<!--select 多选-->
<div class="Search-box"
v-show="item.showFlag==false?item.showFlag:true"
v-if="item.type==='Selects'">
<span class="title"
:class="classObject(item.required)">{{item.label}}</span>
<div class="box">
<el-select v-model="formData[item.prop]"
:filterable="item.filterable"
:clearable="true"
:disabled="item.disabled"
:placeholder="item.placeholder"
multiple
collapse-tags
size="mini">
<el-option v-for="select in item.options"
:label="select.label"
:key="select.value+select.label"
:value="select.value"></el-option>
</el-select>
</div>
</div>
<!-- Date -->
<div class="Search-box"
v-show="item.showFlag==false?item.showFlag:true"
v-if="item.type=='Date'"
style="font-size:12px">
<!-- <div>{{item}}</div> -->
<span class="title"
:class="classObject(item.required)">{{item.label}}</span>
<div class="box">
<el-date-picker size="mini"
:clearable="true"
v-model="formData[item.prop]"
:value-format="item.dateFormate"
:type="item.timeType"
align="right"
placeholder="选择日期"></el-date-picker>
</div>
</div>
<!-- 年月 -->
<div class="Search-box"
v-show="item.showFlag==false?item.showFlag:true"
v-if="item.type=='Date_monthrange'"
style="font-size:12px">
<span class="title"
:class="classObject(item.required)">{{item.label}}</span>
<div class="box">
<el-date-picker size="mini"
:clearable="true"
v-model="formData[item.prop]"
:value-format="item.dateFormate"
type="monthrange"
align="right"
range-separator="至"
start-placeholder="开始月份"
end-placeholder="结束月份">
</el-date-picker>
</div>
</div>
<!-- 下拉分页 -->
<div class="Search-box"
v-show="item.showFlag==false?item.showFlag:true"
v-if="item.type=='Selects_page'">
<span class="title"
:class="classObject(item.required)">{{item.label}}</span>
<div class="box">
<selectecho :url="item.url"
:classification="item.classification"
:singlechoice="item.singlechoice"
:positionindex="0"
:ref="item.dataCustom"
:search="item.search"
:displayfields="item.displayfields"
@selectecho="getselectecho(item)"
:title="item.title"
:placeholder="item.placeholder"
:columns="item.columns" />
</div>
</div>
<!-- 时间段 -->
<div class="Search-box"
v-show="item.showFlag==false?item.showFlag:true"
v-if="item.type=='Time_feame'"
style="font-size:12px">
<span class="title"
:class="classObject(item.required)">{{item.label}}</span>
<div class="box">
<el-date-picker size="mini"
:clearable="true"
v-model="formData[item.prop]"
:value-format="item.dateFormate"
:type="item.timeType"
:default-time="item.defaultTime"
align="right"
start-placeholder="开始"
end-placeholder="结束"></el-date-picker>
</div>
</div>
</div>
</div>
<div class="right">
<el-button size="mini"
v-for="item in formHandler"
:key="item.key"
:type="item.type"
@click="item.handler && item.handler()">{{item.label}}</el-button>
</div>
</div>
</template>
<script>
import selectecho from "@/components/selectdiong";
export default {
name: "Search",
props: {
lableWidth: {
type: String,
default: "120px"
},
//hover提示语
hint: {
type: String,
default: ""
},
//是否显示
showFlag: {
type: Boolean,
default: true
},
//表单数据
formData: {
type: Object,
default: () => { }
},
//表单配置
formItem: {
type: Array,
default: () => { }
},
//按钮
formHandler: {
type: Array,
default: () => { }
},
//验证
verification: {
default () {
return () => { };
},
type: Function
}
},
// props: ['child1Info'],
data () {
return {
selectedData: {},
//提示信息
type_msg: {
Input: "请输入",
Radio: "请选择",
Checkbox: "请选择",
Select: "请选择",
Date: "请选择"
}
};
},
// 组件注册
components: {
selectecho
},
watch: {},
// 在 methods 中定义方法
methods: {
//必填标识
classObject (flag) {
return {
mustInput: flag
};
},
// 获取组件中选取得数据
getselectecho (item) {
this.formData[item.prop] = this.$refs[item.dataCustom][0].selecData.map(
el => {
return el[item.displayfields.id];
}
);
console.log(this.$refs[item.dataCustom][0].selecData);
this.$refs[item.dataCustom][0].dataCustom = this.$refs[
item.dataCustom
][0].selecData;
},
// 重置下拉分页数据源
resetselectecho () {
this.formItem.forEach(el => {
if (el.type == "Selects_page") {
this.$refs[el.dataCustom][0].dataCustom = [];
}
});
},
//初始化
initFormData () {
const formData = {};
this.formItem.forEach(item => {
if (item.required) {
this.rules(item);
}
//自定义验证规则
if (item.validator) {
item.rules = item.validator;
}
});
this.form = formData;
},
// 规则
rules (item) {
const requiredRules = [
{
required: true,
message:
item.required_msg || `${this.type_msg[item.type]}${item.lable}`,
trigger: "blur"
}
];
//其他规则
if (item.rules && item.rules.length > 0) {
item.rules = requiredRules.concat(item.rules);
} else {
item.rules = requiredRules;
}
return requiredRules;
}
},
mounted () {
// 直接传回到最外层父组件
this.$emit("test1", "儿子组件啊啊啊");
},
watch: {
formItem: {
handler (newValue) {
// console.log(newValue);
this.initFormData();
},
immediate: true
}
}
};
</script>
<style>
.searchBox {
background-color: #f7f7f7;
box-shadow: 0px 0px 1px #ccc;
border-radius: 3px;
align-items: center;
padding: 10px 10px 20px 10px;
width: 100%;
min-height: 100px;
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
flex-direction: column;
justify-content: space-between;
}
.searchBox .mustData::before {
display: inline-block;
content: '* ';
color: #f56c6c;
margin-right: 4px;
}
.searchBox .left {
/* width: 100%; */
/* flex: 2; */
display: flex;
/* height: 100%; */
min-height: 80px;
width: 100%;
flex-wrap: wrap;
}
.searchBox .left .Search-box {
display: flex;
align-items: center;
padding: 0 5px;
height: 100%;
font-size: 12px;
}
.searchBox .left .Search-box .title {
font-size: 12px;
display: inline-block;
white-space: nowrap;
text-align: right;
padding-right: 5px;
}
.searchBox .left .Search-box .el-input {
margin: 10px 0 10px 0;
width: 200px;
}
.searchBox .left .Search-box .el-date-editor .el-range-separator {
width: 22px !important;
}
.searchBox .left .number .el-input {
margin: 10px 5px;
width: 100px;
}
.searchBox .leftclone .Search-box {
flex: 0 !important;
}
.searchBox .leftclone .Search-box .el-input {
width: 200px !important;
}
.searchBox .right {
flex: 1;
display: flex;
align-items: center;
justify-content: flex-start;
padding-right: 20px;
}
</style>
下拉多选组件:selectecho文章来源地址https://www.toymoban.com/news/detail-480573.html
<template>
<div class="selectecho">
<el-select v-model="datasource"
ref="selectref"
:placeholder="selectPlaceholder==''?'请选择':selectPlaceholder"
:disabled="disabledfalg"
@focus="switchfun"
clearable
@change="changedatasource"
:multiple="!singlechoice"
collapse-tags
size="mini">
<el-option :value="item[displayfields.id]"
:label="item[displayfields.name]+`${singlechoice&&item[displayfields.code?displayfields.code:(displayfields.id&&displayfields.id!==displayfields.name)]?('('+item[displayfields.code?displayfields.code:displayfields.id]+')'):''}`"
v-for="item in data.length?data:dataCustom"
:key="item[displayfields.id]"></el-option>
</el-select>
<el-dialog :close-on-click-modal="false"
:title="title"
class="dialogBox"
:visible.sync="centerDialog.visible"
:width="dialogWidth"
:append-to-body="true"
center>
<div class="Selecteddata">
<div class="title">已 选</div>
<span v-if="dataselected.length==0">未选择~</span>
<div class="selectlist">
<div class="termselect"
v-for="(item,index) in dataselected"
:key="item[displayfields.id]">
<span>{{item[displayfields.name]+`${item[displayfields.code?displayfields.code:(displayfields.id&&displayfields.id!==displayfields.name)]?('('+item[displayfields.code?displayfields.code:displayfields.id]+')'):''}`}}</span>
<i @click="deleteselect(index)"
class="el-icon-circle-close"></i>
</div>
</div>
</div>
<div class="seachlist">
<div class="title">搜 索</div>
<div class="seachinput">
<el-input clearable
v-model="searchfrom[displayfields.seach]"
:placeholder="placeholder"
size="mini">
</el-input>
<el-button @click="searchfrom[displayfields.seach]='',Initialrequest(1)"
size="mini">重 置</el-button>
<el-button size="mini"
@click="Initialrequest(1)"
type="primary">搜 索</el-button>
</div>
</div>
<div class="tab">
<div class="title">全部数据</div>
<template>
<el-table ref="multipleTable"
:data="centerDialog.data"
tooltip-effect="dark"
border
fit
:header-cell-class-name="cellClass"
max-height="300px"
size="mini"
@select="handleSelection"
@select-all="handleSelectionall">
<el-table-column :selectable="selectable"
fixed
type="selection"
width="55"
align="center">
</el-table-column>
<el-table-column label="序号"
width="50">
<template slot-scope="scope">{{(scope.$index+1)+(searchfrom.current-1)*searchfrom.size}}</template>
</el-table-column>
<el-table-column show-overflow-tooltip
v-for="(item,index) in columns"
:key="index"
:min-width="item.width"
:prop="item.prop"
:label="item.label"></el-table-column>
</el-table>
</template>
</div>
<div class="fenye">
<el-pagination @size-change="Initialrequest"
@current-change="Initialrequest"
:current-page.sync="searchfrom.current"
background
:small="true"
:page-sizes="[20, 50, 100, 200]"
:page-size.sync="searchfrom.size"
layout="total, sizes, prev, pager, next, jumper"
:total="centerDialog.total"></el-pagination>
</div>
<span slot="footer"
class="dialog-footer">
<el-button @click="centerDialog.visible = false"
size="mini">取 消</el-button>
<el-button type="primary"
@click="Submit"
size="mini">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import Bus from "@/store/Bus";
import api from "@/api";
export default {
name: "select-echo",
props: {
// 是否禁用
disabledfalg: {
type: Boolean,
default: () => {
return false;
}
},
// 编辑时已选的
data: {
type: Array,
default: () => {
return [];
}
},
// 输入框提示文字
placeholder: {
type: String,
default: () => {
return "";
}
},
//外面下拉显示下拉框文字提示
selectPlaceholder: {
type: String,
default: () => {
return "";
}
},
// 搜索条件
search: {
type: Object,
default: () => {
return {};
}
},
// 是否返回整个对象
currentline: {
type: Boolean,
default: () => {
return false;
}
},
// 是否在列表上
positionindex: {
type: Number,
default: () => {
return -1;
}
},
// 显示字段(下拉框返回的两个字段以及列表中与其相对应的字段和搜索列表字段)
displayfields: {
type: Object,
default: () => {
return {};
}
},
// 是否单选
singlechoice: {
type: Boolean,
default: () => {
return false;
}
},
// 列表展示字段
columns: {
type: Array,
default: () => {
return [];
}
},
// 接口文件
classification: {
type: String,
default: () => {
return "";
}
},
// 产品图号已选数据
productselected: {
type: Array,
default: () => {
return [];
}
},
// 弹框标题
title: {
type: String,
default: () => {
return "";
}
},
//弹框宽度
dialogWidth: {
type: String,
default: () => {
return "686px";
}
},
// 接口路径
url: {
type: String,
default: () => {
return "";
}
}
},
data () {
return {
filterText: "",
dataCustom: [],
datasource: [], // 已选中选中的唯一标识
dataselected: [], //弹框展示中的选中
selecData: [], //用于单独拉去数据
searchfrom: {}, //用户vue的双向绑定缺陷
currentlinelist: [], //当前数据的所有信息
multipleSelection: [], //用于列表选中(现在只用于列表反选)
centerDialog: {
visible: false,
data: [],
total: 0
}
};
},
watch: {
data: {
//用于在监听选中数据时取出唯一标识
handler (val) {
let that = this;
this.$nextTick(() => {
if (!that.singlechoice) {
that.datasource = that.data.map(item => {
return item[that.displayfields.id];
});
} else {
that.datasource = that.data.length
? that.data[0][that.displayfields.id]
: "";
}
});
},
deep: true,
immediate: true
},
dataCustom: {
//用于在监听选中数据时取出唯一标识
handler (val) {
let that = this;
if (that.data.length > 0) {
return;
}
if (!that.singlechoice) {
that.datasource = that.dataCustom.map(item => {
return item[that.displayfields.id];
});
} else {
that.datasource = that.dataCustom.length
? that.dataCustom[0][that.displayfields.id]
: "";
}
},
deep: true,
immediate: true
}
},
created () {
this.searchfrom = this.search;
},
// 在 methods 中定义方法
methods: {
cellClass (row) {
// console.log(row);
if (row.columnIndex === 0 && this.singlechoice) {
return "DisableSelection";
}
},
/**
* 判断右侧表格数据是否能够被勾选删除
*/
selectable (row, index) {
if (this.dataselected.length == 0 || !this.singlechoice) {
if (this.singlechoice && this.productselected.length) {
let falg = true;
if (
this.productselected.some(el => {
return el === row[this.displayfields.listid];
})
) {
return false;
} else {
return true;
}
}
return true;
} else {
return false;
}
},
// 删除选择
deleteselect (val) {
this.dataselected.splice(val, 1);
this.$nextTick(() => {
this.antielection();
});
},
// 下拉选择
changedatasource () {
let arr = [],
currentlinelist = [];
this.datasource &&
this.datasource.forEach(item => {
this[this.data.length ? "data" : "dataCustom"].forEach(row => {
if (item == row[this.displayfields.id]) {
arr.push(row);
}
});
this.currentlinelist.forEach(row => {
if (item == row[this.displayfields.listid]) {
currentlinelist.push(row);
}
});
});
this.currentlinelist = currentlinelist;
this.selecData = arr;
this.$emit("selectecho", arr, this.positionindex, this.currentlinelist);
},
// 确认选择的数据
Submit () {
this.selecData = this.dataselected;
this.$emit(
"selectecho",
this.dataselected,
this.positionindex,
this.currentlinelist
);
this.centerDialog.visible = false;
},
// 单选数据
handleSelection (selection, val) {
let arr = selection.filter(item => {
return item != undefined;
});
let falg = false;
arr.forEach(item => {
if (val[this.displayfields.listid] == item[this.displayfields.listid]) {
falg = true;
}
});
let Displayobject = {};
if (falg) {
Displayobject[this.displayfields.id] = val[this.displayfields.listid];
if (this.displayfields.code) {
Displayobject[this.displayfields.code] =
val[this.displayfields.listcode];
}
Displayobject[this.displayfields.name] =
val[this.displayfields.listname];
this.dataselected.push(Displayobject);
this.currentlinelist.push(val);
} else {
this.dataselected.forEach((item, index) => {
if (item[this.displayfields.id] == val[this.displayfields.listid]) {
this.dataselected.splice(index, 1);
}
});
this.currentlinelist.forEach((item, index) => {
if (
item[this.displayfields.listid] == val[this.displayfields.listid]
) {
this.currentlinelist.splice(index, 1);
}
});
}
},
// 全选数据
handleSelectionall (val) {
let arr = val.filter(item => {
return item != undefined;
});
// console.log(arr.length);
if (arr.length) {
// 全选
let selectall = [...this.dataselected];
arr.forEach(item => {
let Displayobject = {};
Displayobject[this.displayfields.id] =
item[this.displayfields.listid];
if (this.displayfields.code) {
Displayobject[this.displayfields.code] =
item[this.displayfields.listcode];
}
Displayobject[this.displayfields.name] =
item[this.displayfields.listname];
selectall.push(Displayobject);
this.currentlinelist.push(item);
});
// 去重
let res = new Map();
this.currentlinelist = this.currentlinelist.filter(
a =>
!res.has(a[this.displayfields.listid]) &&
res.set(a[this.displayfields.listid], 1)
);
let ress = new Map();
selectall = selectall.filter(
a =>
!ress.has(a[this.displayfields.id]) &&
ress.set(a[this.displayfields.id], 1)
);
this.dataselected = selectall;
} else {
//全不选
this.centerDialog.data.forEach(item => {
this.dataselected.forEach((row, index) => {
if (item[this.displayfields.listid] == row[this.displayfields.id]) {
this.dataselected.splice(index, 1);
}
});
this.currentlinelist.forEach((row, index) => {
if (
item[this.displayfields.listid] == row[this.displayfields.listid]
) {
this.currentlinelist.splice(index, 1);
}
});
});
}
},
handleSelectionChange (val) {
this.multipleSelection = val;
},
// 反选列表数据
antielection () {
this.multipleSelection = JSON.parse(JSON.stringify(this.dataselected));
setTimeout(() => {
this.$nextTick(() => {
this.$refs.multipleTable.clearSelection();
this.multipleSelection.forEach(row => {
// 不能自己自定义对象来设置选中(原因如下分析),那我可以从列表中找到需要选中的那个对象,然后把它拿过来作为选中的项就可以了
this.$refs.multipleTable.toggleRowSelection(
this.centerDialog.data.find(item => {
return (
row[this.displayfields.id] == item[this.displayfields.listid]
); // 注意这里寻找的字段要唯一
}),
true
);
});
this.multipleSelection = JSON.parse(
JSON.stringify(this.productselected)
);
this.multipleSelection.forEach(row => {
// 不能自己自定义对象来设置选中(原因如下分析),那我可以从列表中找到需要选中的那个对象,然后把它拿过来作为选中的项就可以了
this.$refs.multipleTable.toggleRowSelection(
this.centerDialog.data.find(item => {
return row == item[this.displayfields.listid]; // 注意这里寻找的字段要唯一
}),
true
);
});
});
}, 200);
},
//初始数据请求
Initialrequest (val) {
if (val == 1) {
this.searchfrom.current = 1;
}
// console.log(this.searchfrom);
api[this.classification][this.url](this.searchfrom).then(res => {
this.centerDialog.data = res.data.records;
this.centerDialog.total = res.data.total;
this.antielection();
});
},
// 打开弹框
switchfun () {
this.centerDialog.visible = true;
this.searchfrom.current = 1;
this.searchfrom = { ...this.search };
this.currentlinelist = [];
this.searchfrom[this.displayfields.seach] = "";
// 分开弹框展示在未确认前端不更改选择框中的数据
this.dataselected = [];
this.data.length &&
(this.dataselected = JSON.parse(JSON.stringify(this.data)));
this.dataCustom.length &&
(this.dataselected = JSON.parse(JSON.stringify(this.dataCustom)));
this.$refs.selectref.blur();
this.Initialrequest(); //初始数据请求
}
}
};
</script>
<style lang="less" scoped>
.tab {
width: 100%;
.title {
font-weight: bold;
text-align: left;
}
}
.fenye {
position: relative;
top: 10px;
display: flex;
z-index: 9999;
justify-content: space-between;
align-items: center;
}
.selectecho {
width: 100%;
}
.Selecteddata,
.seachlist {
width: 100%;
.title {
font-weight: bold;
text-align: left;
}
.seachinput {
display: flex;
padding: 10px 0;
.el-input {
width: 200px;
margin-right: 10px;
}
}
.selectlist {
width: 100%;
&:hover {
color: rgba(0, 0, 0, 0.3);
}
& > span:first-child {
color: rgba(0, 0, 0, 0.3);
}
display: flex;
max-height: 100px;
overflow: auto;
scrollbar-width: none;
-ms-overflow-style: none;
color: rgba(0, 0, 0, 0.1);
// box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2);
transition: color 0.3s ease;
flex-wrap: wrap;
.termselect {
background-color: #f4f4f5;
border-color: #e9e9eb;
color: #909399;
border-width: 1px;
border-style: solid;
border-radius: 4px;
padding-left: 5px;
font-size: 12px;
margin: 5px;
.el-icon-circle-close {
margin: 0 5px;
font-weight: bold;
}
.el-icon-circle-close:hover {
cursor: pointer;
}
}
}
}
</style>
到了这里,关于vue2+element ui封装搜索组件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!