vue2-element组件二次封装
文章目录前言一、单选select分页二、多选select分页总结前言由于项目中有时一个select的候选项会一次性返回很多数据，比如我的就有上万条。一次性都渲染会造成页面直接卡死。本篇笔记就记录一下如何使用 elmentUI Select 选择器 和Pagination 分页组件进行性能优化处理。你也可以对次进行改编成模板...ps：单选select分页是根据前辈的案例进行了改编和优化处理一、单选
·
前言
透传是一个通讯层面的概念，指的是在通讯中不管传输的业务内容如何，只负责将传输的内容由源地址传输到目的地址，而不对业务数据内容做任何改变。其实我们前端也一直在使用透传，特别是在做基础封装时。相信不少前端er做项目都会用到组件库，是ElementUI还是Ant Design，这都不重要。然后我们又希望在第三方组件库的基础上再做一点点定制。
一、单选、多选select分页（支持搜索）
由于项目中有时一个select的候选项会一次性返回很多数据，比如我的就有上万条。一次性都渲染会造成页面直接卡死。本篇笔记就记录一下如何使用 elmentUI Select 选择器 和Pagination 分页组件进行性能优化处理。
你也可以对次进行改编成模板…
简单说明：
1. 支持搜索记忆功能，在搜索中途关闭选项卡时，会显示上次已选的正确选项。当input中有正确的值时会自动跳转到对应的分页
2. 如果你对此封装成了自己的组件，在子向传父组件传递候选项数据时，需要同时对options和options1进行赋值且他们的值应保持一致
代码如下（示例）：
<!DOCTYPE html>
<html>
<head>element selelct分页搜索（多选）</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="./css/element.css">
<!-- 引入组件库 -->
<script src="./js/vue.min.js"></script>
<script src="./js/element.js"></script>
<style>
#main {
width: 100%;
height: 100%;
text-align: center;
}
.el-input__inner {
background: #5183ff !important;
color: white;
border: none;
min-height: 32px !important;
padding: 10px 22px 10px 10px;
text-align: center;
}
.el-select .el-input .el-select__caret {
display: none;
}
.el-select-dropdown__list {
padding: 0;
}
.el-select-dropdown__list .el-page {
position: sticky;
bottom: 0;
background: #fff;
}
</style>
<body>
<div id='main'>
<el-select class="" v-model="value1" placeholder="请选择吃点" :clearable="false" size="mini" refs="mySelect"
:reserve-keyword="true" filterable popper-class="sele" :filter-method="filter" @change="changed"
@remove-tag="removeTab" @focus="focus" @blur="funb" @visible-change="hidden" multiple="true">
<!--multiple="true"-->
<el-option v-for="item in optionfen" :key="item.value" :label="item.label" remote :value="item.value"
placeholder="请输入">
</el-option>
<div class="el-page">
<el-pagination small @current-change="handleCurrentChange" :current-page="currentpage"
:page-size="pageSize" layout="prev, pager,next,total" :total="options.length">
</el-pagination>
</div>
</el-select>
<el-button type="primary" size="small" icon="el-icon-search" @click='getInputVal'>搜索</el-button>
<ul style="position: absolute; width: 250px; margin: 0 auto; top: 50px;">
<li v-for="item in dataAll">
{{item.label}} : {{item.value}}
</li>
</ul>
</div>
<script>
new Vue({
el: '#main',
data() {
return {
options: [], //总数据
options1: [], //搜索的数据
optionfen: [], //当前页码的数据
value1: [], //输入框的值
currentpage: 1, //当前页码
pageSize: 6, //每页展示的条数
dataAll: [],
isTimer: '' //防抖时间
};
},
computed: {},
mounted() {
_self = this;
//模拟数据
for (let index = 1; index < 1000; index++) {
_self.options.push({
"value": "选项options" + index,
"label": "北京烤鸭" + index
});
}
//初始时使options1和options保持同样的数据
_self.options1 = _self.options;
},
methods: {
isDebounce(fn, delay) {
let _self = this; // 取debounce执行作用域的this
let args = arguments;
if (_self.isTimer) {
clearTimeout(_self.isTimer);
}
_self.isTimer = setTimeout(function () {
fn.apply(_self.isDebounce, args); // 用apply指向调用debounce的对象，相当于_this.fn(args);
}, delay);
},
getInputVal() {
console.log(this.value1);
console.log(this.dataAll);
},
removeTab(res) {
},
//分页的实现,currentpage 为页码，每页展示的数据为10（可自行更改pageSize）条，分别是在总数据options中
//下标从(currentpage -1)*10开始的十条数据
handleCurrentChange(val) {
this.optionfen = [];
this.currentpage = val;
let start = (val - 1) * this.pageSize;
let end = Number(start) + Number(this.pageSize);
//此处需要判断如果计算的结束下标大于总数据的长度，则需要修改结束下标
if (end > this.options.length) {
end = this.options.length;
}
for (let i = start; i < end; i++) {
//将取到的数据展示在页面
this.optionfen.push(this.options[i]);
}
},
//已选择数据
changed(e) {
let _self = this;
_self.dataAll = [];
//匹配当前分页与输入框中value对应的数据
let selectValLength = Array.isArray(_self.value1) ? _self.value1.length : 1;
for (let j = 0; j < selectValLength; j++) {
const selectVal = Array.isArray(_self.value1) ? _self.value1[j] : _self.value1;
for (let i = 0, len = _self.options1.length; i < len; i++) {
const option = _self.options1[i];
if (option.value === selectVal) {
let bool = true;
//防止添加重复数据
for (let k = 0; k < _self.dataAll.length; k++) {
if (_self.dataAll[k].value === selectVal) {
bool = false;
break;
}
}
bool ? _self.dataAll.push(option) : '';
break;
}
}
}
// this.$emit(`${this.funName}`, _self.dataAll); //推送
},
// 获得焦点
//获得焦点的时候跳转到当前第一个value所在的页码
focus() {
let _self = this;
let flag = false;
let func = function () {
let firstInputVal = Array.isArray(_self.value1) ? _self.value1[0] : _self.value1;
for (let i in _self.options1) {
i = Number(i);
if (_self.options1[i].value == firstInputVal) {
// console.log(_self.options1[i].value + " 第" + i + "個值做对比 " + firstInputVal);
flag = true;
if (_self.pageSize >= i) { //pageSize大于等于总数据长度，说明只有1页数据或没有数据
_self.currentpage = 1;
_self.handleCurrentChange(1)
} else {
const size = parseInt(i / _self.pageSize); //取商
const rest = i % _self.pageSize; //取余数
if (rest > 0) { //余数大于0，说明实际最后一页数据不足pageSize，应该取size+1为最后一条的页码
_self.currentpage = size + 1;//当前页码重置，取size+1
} else if (rest === 0) { //余数等于0，最后一页数据条数正好是pageSize //注：余数不可能小于0
_self.currentpage = size;//当前页码重置，取size
}
}
_self.handleCurrentChange(_self.currentpage)
break;
}
}
}
_self.isDebounce(func, 150);
//如果没有就默认展示第一页
if (!flag) {
_self.currentpage = 1;
_self.handleCurrentChange(1);
}
},
// 失去焦点
funb() {
// console.log('失去焦点');
let elment = document.querySelector(".el-input__inner");
elment.style.color = '#ddd'
},
// 隐藏select列表
hidden(bool) {
if (!bool) {
//关闭select下拉框的时候重置页码及数据,并移除事件监听
this.optionfen = [];
this.options = this.options1;
let start = 0;
let end = Number(start) + Number(this.pageSize);
if (end > this.options1.length) {
end = this.options1.length;
}
for (let i = start; i < end; i++) {
this.optionfen.push(this.options1[i]);
}
// 移除mousedown事件监听
removeEventListener("mousedown", function () { }, false);
} else {
// 打开select列表
// 增加mousedown事件监听 当点击分页时移除输入框的默认事件 ，让他不会失去焦点（blur),如果不加，就会
//出现当用户点击分页之后，输入框会失去焦点，这个时候如果用户需要输入数据进行搜索就需要删除输入框的值再输入，体验不好。
//（elementUI下拉框的默认样式，当可搜索时点击输入框可直接输入，不需要删除上次数据）
document.addEventListener(
"mousedown",
function (e) {
if (
e.target.tagName === "LI" ||
(e.target.tagName == "I" && e.target.localName == "i")
) {
e.preventDefault();
}
},
false
);
this.focus();
}
},
//搜索方法,将符合的数据存入options中，并分页展示
filter(val) {
// console.log('过滤');
this.optionfen = [];
let arr = [];
let value = val.toLowerCase();
for (let i = 0, len = this.options1.length; i < len; i++) {
if (this.options1[i].label.toLowerCase().indexOf(value) >= 0) {
arr.push(this.options1[i]);
}
}
this.options = arr;
this.handleCurrentChange(1);
},
},
});
</script>
</body>
</html>
二、selectTree 支持单选和多选
简单说明：
1. 常用属性配置(调用示例)
* <tree-select :height="400" // 下拉框中树形高度
:width="200" // 下拉框中树形宽度 不填写自适应el-select input框大小
size="small" // 输入框的尺寸: medium/small/mini
:data="data" // 树结构的数据或者普通包含主键，父主键的普通集合
:obj="{}" // 可自定义字段，字段映射见最下面
multiple // 多选
:default-keys="..." // 默认值：单选可传入数字，字符串，对象；多选传入【数字|字符|对象】数组，其他非法
clearable // 可清空选择
collapseTags // 多选时将选中值按文字的形式展示
expand-click-node // 点击节点自动展开。多选有效
check-click-node // 是否点击节点是选中 多选生效
checkStrictly // 多选时，严格遵循父子不互相关联 效果参考elementui 对应属性效果
@getValue="父组件获取值方法"> // 事件有两个参数：第一个是所有选中的节点ID，第二个是所有选中的节点数据
</tree-select>
:obj 字段映射如下，值填写你实际字段，可拓展字段。最终返回主键以及选择对象【全部字段】
id:'id',//可改成自己对应主键【改值】
label: 'label',// 显示名称
children: 'children', //子级字段名
path:'path',//路径
content:'content',//描述
pid:'pid',//父id
模板代码如下（示例）：
<template>
<div>
<div class="mask" v-show="isShowSelect"></div>
<el-popover placement="bottom-start" :width="popoverWidth" trigger="manual" v-model="isShowSelect" @hide="popoverHide">
<el-tree class="common-tree" :width="width" ref="tree" :data="treeData" :props="obj" :show-checkbox="multiple" :node-key="obj.id" :check-strictly="checkStrictly" :default-expanded-keys="[6]" :expand-on-click-node="multiple&&expandClickNode" :check-on-click-node="checkClickNode" :highlight-current="true" @check-change="nodeClick" @node-click="nodeClick" default-expand-all></el-tree>
<el-select slot="reference" ref="select" :popper-append-to-body="false" :size="size" v-model="returnDataKeys" :multiple="multiple" :clearable="clearable" :collapse-tags="collapseTags" @click.native="selectClick" @remove-tag="removeTag" @clear="clean" class="tree-select">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
<el-row>
<el-button v-if="multiple" class="ok" @click="isShowSelect=false" size="mini" type="text">确定</el-button>
</el-row>
</el-popover>
</div>
</template>
<script>
export default {
name: 'test-code',
props: {
// 树结构数据
data: {
type: Array,
default() {
return [];
}
},
obj: {
type: Object,
required: false,
default: () => {
return {
id: 'id',// ID
label: 'label',// 显示名称
children: 'children', //子级字段名
path: 'path',//路径
content: 'content',//描述
pid: 'pid',//父id
}
}
},
// 配置是否可多选
multiple: {
type: Boolean,
default() {
return false;
}
},
// 配置是否可清空选择
clearable: {
type: Boolean,
default() {
return false;
}
},
// 配置多选时是否将选中值按文字的形式展示
collapseTags: {
type: Boolean,
default() {
return false;
}
},
// 显示复选框情况下，是否严格遵循父子不互相关联
checkStrictly: {
type: Boolean,
default() {
return false;
}
},
//多选是设置点击节点是否可以选中
checkClickNode: {
type: Boolean,
default() {
return false;
}
},
//多选时：点击节点展开还是点三角标
expandClickNode: {
type: Boolean,
default() {
return false;
}
},
// 默认选中的节点key
defaultKeys: {
type: [Number, String, Array, Object],
default() {
return [];
}
},
size: {
type: String,
default() {
return 'small';
}
},
width: {
type: String,
default() {
return '100%';
}
},
height: {
type: String,
default() {
return '300px';
}
}
},
//上面是父组件可传入参数
data() {
return {
popoverWidth: "0px",//下拉框大小
isShowSelect: false, // 是否显示树状选择器
options: [],//select option选项
returnDatas: [],//返回给父组件数组对象
returnDataKeys: [],//返回父组件数组主键值
};
},
computed: {
treeData() { // 若非树状结构，则转化为树状结构数据
return JSON.stringify(this.data).indexOf(this.obj.children) !== -1 ? this.data : this.switchTree();
},
},
mounted() {
this.init();
},
methods: {
init() {
// eslint-disable-next-line no-undef,no-debugger
if (this.defaultKeys != undefined && this.defaultKeys.length > 0) {
if (this.multiple) {
// 多选
if (Object.prototype.toString.call(this.defaultKeys).indexOf("Array") != -1) {
if (Object.prototype.toString.call(this.defaultKeys[0]).indexOf("Object") != -1) {//对象
this.setDatas(this.defaultKeys);
} else if (Object.prototype.toString.call(this.defaultKeys[0]).indexOf("Number") != -1
|| Object.prototype.toString.call(this.defaultKeys[0]).indexOf("String") != -1) {
this.setKeys(this.defaultKeys);
} else {
console.log("多选：传入参数类型不匹配");
return;
}
} else {
console.log("多选：传入参数类型不匹配");
return;
}
} else {
// 单选
if (Object.prototype.toString.call(this.defaultKeys).indexOf("Number") != -1
|| Object.prototype.toString.call(this.defaultKeys).indexOf("String") != -1
|| Object.prototype.toString.call(this.defaultKeys).indexOf("Object") != -1) {
this.setKey(this.defaultKeys);
} else {
console.log("单选：传入参数类型不匹配");
return;
}
}
}
},
//下拉框select点击[入口]
selectClick() {
this.$nextTick(function () {//设置下拉框自适应宽度
this.popoverWidth = this.$refs.select.$el.clientWidth - 26;
})
//显示下拉框
return this.isShowSelect = !this.isShowSelect
},
//单选: 树点击方法
nodeClick(data, node) {
if (!this.multiple) {//单选
this.isShowSelect = false;
this.setKey(node.key);
} else {//多选
var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
var t = [];
this.options = checkedKeys.map((item) => {//设置option选项
var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
t.push(node.data);
return { label: node.label, value: node.key };
});
this.returnDataKeys = this.options.map((item) => {
return item.value;
});
this.returnDatas = t;
}
},
//单选:清空选中
clean() {
this.$refs.tree.setCurrentKey(null);//清除树选中key
this.returnDatas = null; this.returnDataKeys = '';
this.popoverHide();
},
//单选:设置、初始化值 key
setKey(thisKey) {
this.$refs.tree.setCurrentKey(thisKey);
var node = this.$refs.tree.getNode(thisKey);
this.setData(node.data);
},
//单选：设置、初始化对象
setData(data) {
this.options = [];
this.options.push({ label: data[this.obj.label], value: data[this.obj.id] });
this.returnDatas = data;
this.returnDataKeys = data[this.obj.id]
},
//多选:设置、初始化值 keys
setKeys(thisKeys) {
this.$refs.tree.setCheckedKeys(thisKeys);
this.returnDataKeys = thisKeys;
var t = [];
thisKeys.map((item) => {//设置option选项
var node = this.$refs.tree.getNode(item); // 所有被选中的节点对应的node
t.push(node.data);
return { label: node.label, value: node.key };
});
this.returnDatas = t;
this.popoverHide()
},
//多选:设置、初始化对象
setDatas(data) {
this.$refs.tree.setCheckedNodes(data);
this.returnDatas = data;
var t = [];
data.map((item) => {//设置option选项
t.push(item[this.obj.id]);
});
this.returnDataKeys = t;
this.popoverHide()
},
// 多选,删除任一select选项的回调
removeTag(val) {
this.$refs.tree.setChecked(val, false);//设置为未选中
var node = this.$refs.tree.getNode(val);//获取节点
if (!this.checkStrictly && node.childNodes.length > 0) {
this.treeToList(node).map(item => {
if (item.childNodes.length <= 0) {
this.$refs.tree.setChecked(item, false);
}
});
}
this.nodeClick();
this.popoverHide();
},
//下拉框关闭执行
popoverHide() {
this.$nextTick(() => {
this.$emit('getValue', this.returnDataKeys, this.returnDatas);
})
},
// 多选，清空所有勾选
clearSelectedNodes() {
var checkedKeys = this.$refs.tree.getCheckedKeys(); // 所有被选中的节点的 key 所组成的数组数据
for (let i = 0; i < checkedKeys.length; i++) {
this.$refs.tree.setChecked(checkedKeys[i], false);
}
},
//树形转为集合
treeToList(tree) {
var queen = [];
var out = [];
queen = queen.concat(tree);
while (queen.length) {
var first = queen.shift();
if (first.childNodes) {
queen = queen.concat(first.childNodes);
}
out.push(first);
}
return out;
},
switchTree() {
return this.buildTree(this.data, this.defaultValue);
},
// 将一维的扁平数组转换为多层级对象
buildTree(data, id) {
const fa = (id) => {
const temp = [];
for (let i = 0; i < data.length; i++) {
const n = data[i];
if (n[this.obj.pid] === id) {
n[this.obj.children] = fa(n[this.obj.id]);
temp.push(n);
}
}
return temp;
};
return fa(id);
},
},
watch: {
isShowSelect(val) {
// 隐藏select自带的下拉框
if (!val) this.$refs.select.blur();
},
}
};
</script>
<style lang="scss" scoped>
.mask {
height: 100%;
position: fixed;
top: 0;
left: 0;
opacity: 0;
z-index: 11;
}
.common-tree {
overflow: auto;
}
.tree-select {
z-index: 111;
::v-deep .el-select-dropdown {
display: none;
}
}
.ok {
float: right;
}
.el-row {
padding-top: 0px !important;
}
</style>
三、element table表格勾选联动(带搜索)，具体功能看视频
演示视频
简单说明：
1. 上下两个表格联动，支持全部行列数据模糊搜索，
2. 可扩展成分页联动，搜索、切换后保持勾选状态，同时能与一个已选择列表进行动态联动
创建组件linkageTbale.vue
<template>
<div>
<el-form
ref="form"
:inline="true"
size="small"
:model="form"
label-width="80px"
>
<el-form-item label="资质大类">
<el-input v-model="form.one"></el-input>
</el-form-item>
<el-form-item label="专业分类">
<el-input v-model="form.two"></el-input>
</el-form-item>
<el-form-item label="资质小类">
<el-input v-model="form.three"></el-input>
</el-form-item>
<el-form-item label="资质等级">
<el-input v-model="form.four"></el-input>
</el-form-item>
<el-form-item label="名称检索">
<el-input v-model="form.name" placeholder="任意字符"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" size="small" @click="onReset"
>重置</el-button
>
</el-form-item>
</el-form>
<el-table
ref="zzlb1Crud"
:data="filterTableData"
tooltip-effect="dark"
@select="zzlb1SelectionChange"
@select-all="zzlb1AllChange"
>
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column
prop="one"
label="资质大类"
:formatter="zzlbFormatter"
>
</el-table-column>
<el-table-column
prop="two"
label="专业分类"
:formatter="zzlbFormatter"
>
</el-table-column>
<el-table-column
prop="three"
label="资质小类"
:formatter="zzlbFormatter"
>
</el-table-column>
<el-table-column
prop="four"
label="资质等级"
:formatter="zzlbFormatter"
>
</el-table-column>
</el-table>
<el-table
ref="zzlb2Crud"
:data="zzlb2Data"
tooltip-effect="dark"
style="width: 100%"
>
<el-table-column type="index" width="50"> </el-table-column>
<el-table-column
prop="one"
label="资质大类"
:formatter="zzlbFormatter"
>
</el-table-column>
<el-table-column
prop="two"
label="专业分类"
:formatter="zzlbFormatter"
>
</el-table-column>
<el-table-column
prop="three"
label="资质小类"
:formatter="zzlbFormatter"
>
</el-table-column>
<el-table-column
prop="four"
label="资质等级"
:formatter="zzlbFormatter"
>
</el-table-column>
<el-table-column label="操作" width="120">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
@click="zzlb2RowDelete(scope.$index, scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
// name > components > mixins > props > data > computed > watch > filter
// 上下两个表格联动，支持全部行列数据搜索，
// 可扩展成分页联动,切换后自动勾选已选值
export default {
name: "linkageTbale", //
components: {},
props: {
tableData: {
type: Array,
default: () => {
return [];
},
},
},
data() {
return {
form: {},
zzlb2Data: [],
};
},
computed: {
// 获取选中数据的唯一值
selectAllIds() {
return this.zzlb2Data.map((item) => {
return item.id;
});
},
// 实时监听表格数据
filterTableData: function () {
// 获取搜索条件
const name = this.form.name; // 模糊搜索
const oneS = this.form.one; // 全字符匹配
const twoS = this.form.two;
const threeS = this.form.three;
const fourS = this.form.four;
let _tableData = this.tableData;
// 前端进行数据筛选
if (oneS) {
_tableData = this.tableData.filter((item) => {
return item["one"].dictValue == oneS;
});
}
if (twoS) {
_tableData = _tableData.filter((item) => {
return item["two"].dictValue == twoS;
});
}
if (threeS) {
_tableData = _tableData.filter((item) => {
return item["three"].dictValue == threeS;
});
}
if (fourS) {
_tableData = _tableData.filter((item) => {
return item["four"].dictValue == fourS;
});
}
if (name) {
_tableData = _tableData.filter((dataNews) => {
return Object.keys(dataNews).some((key) => {
return (
String(dataNews[key].dictValue)
.toLowerCase()
.indexOf(name) > -1
);
});
});
}
return _tableData;
},
},
watch: {
filterTableData() {
this.changeState();
},
},
methods: {
// 格式化数据，不需要可删掉
zzlbFormatter(row, value) {
return row[value.property].dictValue;
},
zzlb1SelectionChange(selecteds, row) {
if (!this.selectAllIds.includes(row.id)) {
this.zzlb2Data.push(row);
} else {
this.selectAllIds.forEach((id, index) => {
if (id === row.id) {
this.zzlb2Data.splice(index, 1);
}
});
}
},
// 全选、取消全选
zzlb1AllChange(selecteds) {
if (selecteds.length > 0) {
selecteds.forEach((item) => {
if (!this.selectAllIds.includes(item.id)) {
this.zzlb2Data.push(item);
}
});
} else {
this.tableData.forEach((item) => {
this.selectAllIds.forEach((id, index) => {
if (id === item.id) {
this.zzlb2Data.splice(index, 1);
}
});
});
}
},
// 已选列表行删除
zzlb2RowDelete(index, row) {
this.zzlb2Data = this.zzlb2Data.filter((item) => {
return item.id !== row.id;
});
this.$refs.zzlb1Crud.selection.forEach((item, index) => {
if (item.id === row.id) {
this.$refs.zzlb1Crud.selection.splice(index, 1);
}
});
},
// 根据行数据唯一值设置表格筛选状态,
changeState() {
let _self = this;
_self.$nextTick(() => {
if (_self.$refs.zzlb1Crud) {
if (_self.selectAllIds.length) {
for (let i = 0; i < _self.filterTableData.length; i++) {
if (
_self.selectAllIds.indexOf(
_self.filterTableData[i]["id"]
) >= 0
) {
_self.$refs.zzlb1Crud.toggleRowSelection(
_self.filterTableData[i],
true
);
}
}
}
}
});
},
onReset() {
this.form = {};
},
},
};
</script>
<style lang='scss' scoped>
</style>
组件调用示例：
<template>
<LinkageTbale :tableData="tableData"></LinkageTbale>
</template>
import LinkageTbale from "./linkageTbale.vue";
export default {
components: { LinkageTbale },
name: "HelloWorld",
data() {
return {
tableData: [
{
id: "1554042370284654593",
one: {
code: "ZZFL",
dictKey: "ZZFL01",
dictValue: "施工总承包",
hasChildren: false,
id: "1554041695265951746",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0101",
dictValue: "建筑施工总承包",
hasChildren: false,
id: "1554041963860791297",
parentId: "1554041695265951746",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL010101",
dictValue: "无",
hasChildren: false,
id: "1554042131960107009",
parentId: "1554041963860791297",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL01010101",
dictValue: "特",
hasChildren: false,
id: "1554042370284654593",
parentId: "1554042131960107009",
parentName: "",
},
},
{
id: "1554042493525889026",
one: {
code: "ZZFL",
dictKey: "ZZFL01",
dictValue: "施工总承包",
hasChildren: false,
id: "1554041695265951746",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0101",
dictValue: "建筑施工总承包",
hasChildren: false,
id: "1554041963860791297",
parentId: "1554041695265951746",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL010101",
dictValue: "无",
hasChildren: false,
id: "1554042131960107009",
parentId: "1554041963860791297",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL01010102",
dictValue: "一",
hasChildren: false,
id: "1554042493525889026",
parentId: "1554042131960107009",
parentName: "",
},
},
{
id: "1554042853845962753",
one: {
code: "ZZFL",
dictKey: "ZZFL01",
dictValue: "施工总承包",
hasChildren: false,
id: "1554041695265951746",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0101",
dictValue: "建筑施工总承包",
hasChildren: false,
id: "1554041963860791297",
parentId: "1554041695265951746",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL010101",
dictValue: "无",
hasChildren: false,
id: "1554042131960107009",
parentId: "1554041963860791297",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL01010104",
dictValue: "三",
hasChildren: false,
id: "1554042853845962753",
parentId: "1554042131960107009",
parentName: "",
},
},
{
id: "1554043555519467521",
one: {
code: "ZZFL",
dictKey: "ZZFL01",
dictValue: "施工总承包",
hasChildren: false,
id: "1554041695265951746",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0102",
dictValue: "市政公用工程施工总承包",
hasChildren: false,
id: "1554043038504390658",
parentId: "1554041695265951746",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL010201",
dictValue: "无",
hasChildren: false,
id: "1554043300396732418",
parentId: "1554043038504390658",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL01020101",
dictValue: "特",
hasChildren: false,
id: "1554043555519467521",
parentId: "1554043300396732418",
parentName: "",
},
},
{
id: "1554043631243431938",
one: {
code: "ZZFL",
dictKey: "ZZFL01",
dictValue: "施工总承包",
hasChildren: false,
id: "1554041695265951746",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0102",
dictValue: "市政公用工程施工总承包",
hasChildren: false,
id: "1554043038504390658",
parentId: "1554041695265951746",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL010201",
dictValue: "无",
hasChildren: false,
id: "1554043300396732418",
parentId: "1554043038504390658",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL01020102",
dictValue: "一",
hasChildren: false,
id: "1554043631243431938",
parentId: "1554043300396732418",
parentName: "",
},
},
{
id: "1554043685509337090",
one: {
code: "ZZFL",
dictKey: "ZZFL01",
dictValue: "施工总承包",
hasChildren: false,
id: "1554041695265951746",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0102",
dictValue: "市政公用工程施工总承包",
hasChildren: false,
id: "1554043038504390658",
parentId: "1554041695265951746",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL010201",
dictValue: "无",
hasChildren: false,
id: "1554043300396732418",
parentId: "1554043038504390658",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL01020103",
dictValue: "二",
hasChildren: false,
id: "1554043685509337090",
parentId: "1554043300396732418",
parentName: "",
},
},
{
id: "1554043751703842817",
one: {
code: "ZZFL",
dictKey: "ZZFL01",
dictValue: "施工总承包",
hasChildren: false,
id: "1554041695265951746",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0102",
dictValue: "市政公用工程施工总承包",
hasChildren: false,
id: "1554043038504390658",
parentId: "1554041695265951746",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL010201",
dictValue: "无",
hasChildren: false,
id: "1554043300396732418",
parentId: "1554043038504390658",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL01020104",
dictValue: "三",
hasChildren: false,
id: "1554043751703842817",
parentId: "1554043300396732418",
parentName: "",
},
},
{
id: "1554045754324619266",
one: {
code: "ZZFL",
dictKey: "ZZFL02",
dictValue: "专业承包",
hasChildren: false,
id: "1554041825356484610",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0202",
dictValue: "公路交通工程专业承包",
hasChildren: false,
id: "1554044946069655553",
parentId: "1554041825356484610",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL020202",
dictValue: "公路机电工程专业承包",
hasChildren: false,
id: "1554045211938197505",
parentId: "1554044946069655553",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL02020202",
dictValue: "二",
hasChildren: false,
id: "1554045754324619266",
parentId: "1554045211938197505",
parentName: "",
},
},
{
id: "1554045832154124289",
one: {
code: "ZZFL",
dictKey: "ZZFL02",
dictValue: "专业承包",
hasChildren: false,
id: "1554041825356484610",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0202",
dictValue: "公路交通工程专业承包",
hasChildren: false,
id: "1554044946069655553",
parentId: "1554041825356484610",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL020203",
dictValue: "公路交通工程专业承包",
hasChildren: false,
id: "1554045285514678273",
parentId: "1554044946069655553",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL02020301",
dictValue: "一",
hasChildren: false,
id: "1554045832154124289",
parentId: "1554045285514678273",
parentName: "",
},
},
{
id: "1554045867268837377",
one: {
code: "ZZFL",
dictKey: "ZZFL02",
dictValue: "专业承包",
hasChildren: false,
id: "1554041825356484610",
parentId: "1554041383935348737",
parentName: "",
},
two: {
code: "ZZFL",
dictKey: "ZZFL0202",
dictValue: "公路交通工程专业承包",
hasChildren: false,
id: "1554044946069655553",
parentId: "1554041825356484610",
parentName: "",
},
three: {
code: "ZZFL",
dictKey: "ZZFL020203",
dictValue: "公路交通工程专业承包",
hasChildren: false,
id: "1554045285514678273",
parentId: "1554044946069655553",
parentName: "",
},
four: {
code: "ZZFL",
dictKey: "ZZFL02020302",
dictValue: "二",
hasChildren: false,
id: "1554045867268837377",
parentId: "1554045285514678273",
parentName: "",
},
},
],
};
},
methods: {
},
mounted() {},
};
</script>
前往低代码交流专区
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)