element vue2 动态添加 select+tree

难点在 1 添加一组一组的渲染 是往数组里push对象 循环的；但是要注意对象的结构! 因为这涉及到编辑完成后，表单提交时候的 校验！ 是校验每一个select tree里边 是否勾选

2 是在后期做编辑回显的时候 保证后端返回的值 是渲染到 select中的tree当中！ 并且是勾选着的
3 任意在一个select当中 移除的时候。
4 任意一个select当中 取消勾选后 显示是否正确

只在提交的时候校验！
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

父组件
<template><el-dialogclass="mpks-common-dialog mpks-search-strategy-resultintervene-dialog"width="810px":title="innerTitle":visible.sync="innerDialogVisible":close-on-click-modal="false":close-on-press-escape="false"@opened="open('form')"@close="close"><el-formref="form":model="currentItem"label-width="104px":rules="formRule"><el-form-item label="知识库名称：" prop="name" class="cd"><el-col :span="20"><el-inputv-model="currentItem.name"placeholder="请输入知识库名称"maxlength="20"show-word-limitclearable></el-input></el-col></el-form-item><el-form-itemlabel=""v-for="(item, index) in currentItem.selects":key="index"class="mpks-common-dialog-form-item-qa create-css"><div class="flex mtop margin-bottom"><el-col ><el-form-item:prop="'selects.' + index + '.NodeVal'":rules="formRule.NodeVal"><el-selectv-model="item.NodeVal"placeholder="请选择知识树节点"multiplecollapse-tags@change="nodeValChange(item, index)"@remove-tag="removeTag(item)"><el-option:value="seletedNodeIdsOptions"style="height: auto;"><channel-tree:idx="index"ref="nodeTree"class="mpks-add-task-tree":checkable="true":check-strictly="false":default-checked-keys="item.innerselectTreeIds":get-permission-node="true"@node-check="selectNodeId"/></el-option></el-select></el-form-item></el-col><el-col><el-form-item:prop="'selects.' + index + '.picVal'":rules="formRule.picVal"><el-selectv-model="item.picVal"placeholder="请选择图谱类目"multiplecollapse-tags@change="picValChange(item, index)"@remove-tag="removeTagPic(item)"><el-option:value="seletedPicIdsOptions"style="height: auto;"><channel-tree-pic:idx="index"ref="nodeTreePic"class="mpks-add-task-tree":checkable="true":check-strictly="false":default-checked-keys="item.innerselectTreePicIds":get-permission-node="true"@node-check="selectPicId"/></el-option></el-select></el-form-item></el-col><el-col><el-form-item:prop="'selects.' + index + '.categoryVal'":rules="formRule.categoryVal"><el-selectv-model="item.categoryVal"placeholder="请选择全文索引类目"multiplecollapse-tags@change="classChange(item, index)"@remove-tag="removeTagCategoryVal(item)"><el-optionstyle="height: auto;":value="seletedIdxIdsOptions"><channel-tree-idx:idx="index"ref="nodeTreeIdx"class="mpks-add-task-tree":checkable="true":check-strictly="false":default-checked-keys="item.innerselectTreeIdxIds":get-permission-node="true"@node-check="selectIdxId"/></el-option></el-select></el-form-item></el-col><spanv-if="currentItem.selects.length === 1"class="between-delete">删除</span><spanv-elseclass="between-delete-true"@click="deleteSelects(item, index)">删除</span></div></el-form-item><divv-if="currentItem.selects.length < maxAdd"class="mpks-visual-query-filter-add-attribute"@click="addCategory"><svg-icon name="add"></svg-icon><span class="add-txt">新增一组</span><span  class="add-plus">(最多支持5组)</span></div><div v-else class="disabled margin-top">+   <span class="add-txt-to">新增一组</span><span  class="add-plus-to">(最多支持5组)</span></div></el-form><div slot="footer"><el-button type="primary" @click="OK('form')">确认</el-button><el-button type="default" @click="Cancel">取消</el-button></div></el-dialog>
</template><script>
import cloneDeep from "lodash/cloneDeep";
import { validate } from "@/common/util.js";
import SvgIcon from "@/components/SvgIcon.vue";
import ChannelTree from "@/components/channelTree.vue";
import ChannelTreePic from "@/components/channelTreepic.vue";
import ChannelTreeIdx from "@/components/ChannelTreeIdx.vue";
// 判断一下， 编辑的时候，不push这个那个对象
export default {name: "SearchStrategyResultInterveneDialog",components: {SvgIcon,ChannelTree,ChannelTreePic,ChannelTreeIdx},props: {title: {type: String,default: "新建知识库"},dialogVisible: {type: Boolean,default: false},sendData: {type: Array,required: true},data: {type: Object,required: true},dataEdit: {type: Object}},beforeMount() {},created() {},mounted() {},data() {var NodeValPass = (rule, value, callback) => {if(this.currentItem.selects[rule.field.substring(8,9)].NodeVal.length===0){callback(new Error('知识树节点不能为空'));}else{callback();}};var picValPass = (rule, value, callback) => {if(this.currentItem.selects[rule.field.substring(8,9)].picVal.length===0){callback(new Error('图谱类目不能为空'));}else{callback();}};var categoryValPass = (rule, value, callback) => {if(this.currentItem.selects[rule.field.substring(8,9)].categoryVal.length===0){callback(new Error('全文索引类目不能为空'));}else{callback();}};return {editFirstNodeIds: [],seletedNodeIdsOptions: [],seletedPicIdsOptions: [],seletedIdxIdsOptions: [],innerselectTreeIds: [],innerselectTreePicIds: [],innerselectTreeIdxIds: [],maxAdd: 1, //允许添加的最大数量NodesOptionsIds: [], //知识树节点idlistClassOptionsIn: [], //initgetClassFilterOptionsIn: [], //initgetNodesOptionsIn: [], //initlistClassOptions: [], //响应 //全文索引类目getClassFilterOptions: [], //响应 图谱类目getNodesOptions: [], //响应 知识树节点editInfo: {edit: 0,id: ""}, //编辑的时候的数据innerTitle: this.title,innerDialogVisible: this.dialogVisible,currentItem: {name: "",selects: []},formRule: {NodeVal: [{validator: NodeValPass,trigger: "change"}],picVal: [{validator: picValPass,trigger: "change"}],categoryVal: [{validator: categoryValPass,trigger: "change"}],name: [{required: true,validator: validate.whitespace,message: "知识库名称不能为空",trigger: "blur"},{validator: validate.length,max: 20,message: "最多20个字符",trigger: "change"}]}};},watch: {dataEdit(newVal) {this.editInfo.edit = 1;this.editInfo.id = newVal.id;this.currentItem.name = newVal.name;this.currentItem.selects = [];newVal.options.forEach((item, index) => {let arr = item.nodeIds.map(i => i).map(itemId => {return this.sendData[2].filter(item => item.id === itemId);});let echoArr = [];arr.forEach(item => {echoArr.push(item[0].name);});this.currentItem.selects.push({NodeVal:  [],picVal:  [],categoryVal: [],innerselectTreeIds: [],innerselectTreePicIds: [],innerselectTreeIdxIds: []});this.currentItem.selects[index] = {innerselectTreeIds: item.nodeIds.map(i => i),innerselectTreePicIds: item.spoIds.map(i => i),innerselectTreeIdxIds: item.presetIds.map(i => i),NodeVal: echoArr,picVal: item.spoIds.map(i => i),categoryVal: item.presetIds.map(i => i)?item.presetIds.map(i => i):[]};});},dialogVisible: "sync",sendData: {handler(newVal) {this.listClassOptions = newVal[0];this.getClassFilterOptions = newVal[1];this.getNodesOptions = newVal[2];this.maxAdd = this.findMinArr(this.listClassOptions,this.getClassFilterOptions,this.getNodesOptions);},deep: true},title(newVal) {this.innerTitle = newVal;if (newVal === "新建知识库") {this.currentItem.name = "";this.editInfo.edit = 0;}}},methods: {removeTag(currentItem) {//转成id 后 与v-modle中的 :default-checked-keys="item.innerselectTreeIds"匹配 回显tree勾选let arr = currentItem.NodeVal.map(itemZhcn => {return this.sendData[2].filter(item => item.name === itemZhcn);});let toIds = [];arr.forEach(item => {toIds.push(item[0].id);});currentItem.innerselectTreeIds = toIds;},removeTagPic(currentItem) {currentItem.innerselectTreePicIds = currentItem.picVal;},removeTagCategoryVal(currentItem) {currentItem.innerselectTreeIdxIds = currentItem.categoryVal;},selectNodeId(params, index) {console.log(params);let selectList = [];let selectLable = [];params.data.forEach(item => {if (+item.id !== 1) {selectList.push(item.id);selectLable.push(item.name);}});this.seletedNodeIdsOptions = selectList;this.currentItem.selects[params.idx].NodeVal = selectLable;this.currentItem.selects[params.idx].NodeValSend = selectList;},selectPicId(params, index) {let selectList = [];let selectLable = [];params.data.forEach(item => {if (+item.id !== 1) {selectList.push(item.id);selectLable.push(item.name);}});this.seletedPicIdsOptions = selectList;this.currentItem.selects[params.idx].picVal = selectLable;this.currentItem.selects[params.idx].picValSend = selectList;},selectIdxId(params, index) {let selectList = [];let selectLable = [];params.data.forEach(item => {if (+item.id !== 1) {selectList.push(item.id);selectLable.push(item.name);}});this.seletedIdxIdsOptions = selectList;this.currentItem.selects[params.idx].categoryVal = selectLable;this.currentItem.selects[params.idx].categoryValSend = selectList;},Cancel() {this.innerDialogVisible = false;},nodeValChange(item, index) {this.currentItem.selects[index].NodeVal = item.NodeVal;this.$forceUpdate();},picValChange(item, index) {// 图谱类目option改变this.currentItem.selects[index].picVal = item.picVal;this.$forceUpdate();},classChange(item, index) {// 全文索引类目option改变this.currentItem.selects[index].categoryVal = item.categoryVal;this.$forceUpdate();},findMinArr(arr1, arr2, arr3) {const shortestLength = Math.min(arr1.length,arr2.length,arr3.length);return shortestLength;},verifyInput() {this.currentItem.selects.forEach(item => {for (const i of Object.keys(item)) {if (item[i].length === 0) {break;}}});},OK(formName) {// TODO:提交this.$refs[formName].validate(valid => {if (valid) {let param = {name: this.currentItem.name,options: []};if (this.editInfo.edit === 1) {//修改 添加参数param.id = this.editInfo.id;param.enabled = 1;}this.currentItem.selects.forEach((currentItem, index) => {let arr = currentItem.NodeVal.map(itemZhcn => {return this.sendData[2].filter(item => item.name === itemZhcn);});let toIds = [];arr.forEach(item => {toIds.push(item[0].id);});let obj = {};obj.nodeIds = toIds; //nodeIds 传id 其他2个传中文过去！obj.presetIds = currentItem.categoryVal;obj.spoIds = currentItem.picVal;param.options.push(obj);});this.$store.dispatch("channel/channelAddOrUpdate", param).then(res => {if (+res.errno === 0) {if (this.editInfo.edit === 1) {//修改this.$message.success("修改成功");this.$parent.channelList();this.currentItem.name = "";this.innerDialogVisible = false;this.editInfo.edit = 0;return;}// 新增this.$message.success("添加成功");this.$parent.channelList();this.currentItem.name = "";this.innerDialogVisible = false;} else {this.$message.error(res.msg || "出错啦，请稍候再试。");}});} else {console.log("error submit!!");return false;}});},addCategory(formName) {this.currentItem.selects.push({NodeVal:  [],picVal:  [],categoryVal: [],innerselectTreeIds: [],innerselectTreePicIds: [],innerselectTreeIdxIds: []});setTimeout(() => {this.clearValidate("form");}, 10);},deleteSelects(item, index) {this.currentItem.selects.splice(index, 1);},modifyItem() {},open(formName) {this.$refs[formName].clearValidate()if (this.editInfo.edit !== 1) {//新增this.currentItem.selects.push({NodeVal:  [],picVal:  [],categoryVal: [],innerselectTreeIds: [],innerselectTreePicIds: [],innerselectTreeIdxIds: []});}},close() {this.clearValidate("form");this.$emit("close");this.currentItem.selects = [];this.currentItem.name = "";},clearValidate(formName) {this.$refs[formName] && this.$refs[formName].clearValidate();},sync(newVal) {this.innerDialogVisible = newVal;}}
};
</script><style lang="less" scoped>
.mpks-search-strategy-resultintervene-dialog {/deep/.el-dialog__footer {padding-top: 0;
margin-top: 28px;.el-button {width: 72px;margin-left: 12px;}}.mpks-search-strategy-resultintervene-search-button {margin: 0 0 0 16px;height: 32px;color: #fff;border-color: #2468f2;line-height: 10px;border: 1px solid #2468f2;border-radius: 4px;font-size: 14px;color: #2468f2;&:hover {border-color: #528eff;color: #528eff;}&:focus {border-color: #2468f2;color: #2468f2;}}.mpks-search-strategy-resultintervene-query-item-wrapper {border: 1px solid #f1f1f1;padding: 10px 0;margin-bottom: 20px;max-width: 880px;}.mpks-search-strategy-resultintervene-block {background: #fafafa;padding: 10px 15px;.mpks-search-strategy-resultintervene-block-title {font-size: 14px;font-weight: 600;}.mpks-search-strategy-resultintervene-block-item {margin: 10px 0;&:first-child {margin-top: 0;}&:last-child {margin-bottom: 0;}.el-button {padding: 0;}}}
}/deep/.mpks-common-dialog-form-item-qa {.el-input-group__append {padding: 0;height: 32px;background-color: #fff;line-height: 32px;border: none;}.el-input__inner {padding-right: 0px !important;}
}/deep/.el-form-item.is-error .el-input__inner,
.el-form-item.is-error .el-textarea__inner {border-color: #f56c6c !important;
}.flex {display: flex;justify-content: space-between;// width: 620px;
}.mtop {margin-top: 10px;
}.mtop:first-of-type {margin-top: 0;
}.margin-bottom{// margin-bottom: 20px!important;
}.between-delete {color: #b7babf;cursor: pointer;
}.between-delete-true {color: #2468F2;cursor: pointer;
}/deep/.el-form-item__error {// padding-top: 8px;
}
.margin-top {margin-top: 10px;
}.el-col-24 {width: auto;
}.mpks-visual-query-filter-add-attribute {width: 170px;margin-top: -16px;margin-left: 102px;
}
.disabled {margin-top: -14px;margin-left: 102px;font-family: PingFangSC-Regular;font-size: 14px;color: #b8babf;line-height: 20px;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;
}/deep/.el-dialog__body {padding: 24px 34px 0!important;
}
/deep/.el-select-dropdown__item {height: 100% !important;
}/deep/.cd {margin-bottom: 40px !important;
}.create-css{margin-bottom: 8px!important;
}/deep/.create-css::before{color: #5C5F66;position: absolute;left: 36px;top: 152px;content: "知识库配置：";width: 120px;height: 26px;display: inline-block;
}/deep/.create-css::after{color: #F56C6C;position: absolute;left: 26px;top:152px;content: "*";width: 120px;height: 26px;display: inline-block;
}/deep/.el-select .el-tag{
// width: 20px;
// display: -webkit-box;
//     -webkit-box-orient: vertical;
//     -webkit-line-clamp: 1;//第几行末尾出现省略号
//     overflow: hidden; 
}.add-txt{display: inline-block;}.add-plus{display: inline-block;color:  #CCCCCC;margin-left: 8px;}.add-txt-to{display: inline-block;color:  #CCCCCC;}.add-plus-to{display: inline-block;color:  #CCCCCC;margin-left: 8px;}
</style>
一组 共3个select tree 组件；这是其中一个select tree组件。 其他2个 结构一样的！
channelTree.Vue
<template><div class="mpks-common-tree"><el-treeref="tree"class="mpks-common-tree-container"v-loading="loading"node-key="id":indent="8":data="tree":auto-expand-parent="true":highlight-current="true":check-strictly="checkStrictly":expand-on-click-node="expandOnClickNode":default-expanded-keys="defaultExpandedKeys":default-checked-keys="innerDefaultCheckedKeys":default-expand-all="defaultExpandAllNodes":show-checkbox="checkable":filter-node-method="filterNode"@node-click="nodeClick"@node-expand="nodeExpand"@node-collapse="nodeCollapse"@check="nodeCheck"@check-change="checkChange"><span class="mpks-common-tree-node" slot-scope="{ node, data }"><span class="mpks-common-tree-node-title" :title="data.name">{{data.name}}</span><div class="mpks-common-tree-node-control-wrapper"><el-popoverv-if="data.isEncryption && from !== 'role'"placement="top"trigger="hover"content="此节点为非公开"><islot="reference"class="el-icon-view mpks-common-tree-node-permission"></i></el-popover></div></span></el-tree></div>
</template><script>
export default {name: "Tree",props: {idx: {type: Number,default: undefined},// 当前选中节点的id， 只读属性currentId: {type: Number,default: undefined},// 点击目录回调函数expandOnClickNode: {type: Boolean,default: true},// 是否自动选中根节点， 会触发nodeClickautoSelectRoot: {type: Boolean,default: true},checkable: {type: Boolean,default: false},checkStrictly: {type: Boolean,default: true},defaultExpandAll: {type: Boolean,default: false},defaultCheckedKeys: {type: Array,default() {return [];}},disabledList: {type: Array,default() {return [];}},checkableItemList: {type: Array,default() {return [];}},displayList: {type: Array,default() {return [];}},from: {type: String,default: ""},roleId: {type: Number,default: 0},onlyEnabledEncryption: {type: Boolean,default: false},readonly: {type: Boolean,default: false},theOnly: {// 知识树权限复选框只能选择一个type: Boolean,default: false},getPermissionNode: {type: Boolean,default: false},},data() {return {list: [],tree: [],currentItem: {name: ""},defaultExpandedKeys: [],loading: false,innerDefaultCheckedKeys: this.defaultCheckedKeys,selectNodes: []};},watch: {defaultCheckedKeys: {handler(val) {this.innerDefaultCheckedKeys= []this.innerDefaultCheckedKeys = val;this.load(val);},deep: true,immediate: true}},computed: {defaultExpandAllNodes() {return !!this.defaultExpandAll;}},methods: {load(val) {this.loading = true;let param = {permissioncode: "knowledge_catelog_view"};this.$store.dispatch("channel/getNodes", param).then(res => {this.loading = false;if (+res.errno === 0) {this.list = this.setDisabledStatus(res.data.list);// this.list = this.filterDisplayNode(this.list);this.tree = this.convertListToTree(this.list);if (this.tree.length === 0) {return false;}// 默认选中是知识树第一个节点let defaultNodeKey = +this.tree[0].id;// this.defaultExpandedKeys = valthis.defaultExpandedKeys.push(defaultNodeKey);} else {this.$message.error(res.msg || "出错啦，请稍候再试。");}},() => {this.loading = false;});},clearTree() {this.$refs.tree.setCheckedKeys([]);},setDisabledStatus(list) {return list.map(item => {let newItem = item;if (this.readonly) {newItem = {...item,disabled: true};} else if (this.onlyEnabledEncryption || this.roleId) {if (!item.isEncryption) {newItem = {...item,disabled: true};}}if (this.disabledList.length) {if (this.disabledList.indexOf(item.id) >= 0) {newItem = {...item,disabled: true};} else {newItem = {...item,disabled: false};}}if (this.checkableItemList.length) {if (this.checkableItemList.indexOf(item.id.toString()) < 0) {newItem = {...item,disabled: true};}}return newItem;});},filterDisplayNode(list) {if (this.displayList.length === 0) {return list;}return list.filter(item => {return this.displayList.indexOf(item.id.toString()) >= 0;});},nodeClick(data) {this.$emit("node-click", {data: data});},nodeExpand(data) {this.$emit("node-expand", {data: data});this.defaultExpandedKeys.push(data.id);},nodeCollapse(data) {this.$emit("node-collapse", {data: data});let collapseIndex = this.defaultExpandedKeys.findIndex(item => {return item === data.id;});this.defaultExpandedKeys.splice(collapseIndex, 1);},nodeCheck(data) {if (this.theOnly) {this.$refs.tree.setCheckedKeys([data.id]);}this.selectNodes = this.$refs.tree.getCheckedKeys(true);this.$emit("node-check", {data: this.$refs.tree.getCheckedNodes(),dataInfo: data,idx: this.idx});},checkChange(...args) {this.$emit("check-change", ...args);},convertListToTree(list) {let root = []; // 根节点列表if (!list || list.length <= 0) {return root;}let indexes = {};// 重置数据状态list.forEach(v => {indexes[v.id] = v;if (+v.parentId === 0) {root.push(v);}v.children = []; // 带有可编辑的节点列表v.parent = null;v.list = []; // 节点所在列表});// 更新childrenlist.forEach(node => {if (+node.parentId !== 0 && indexes[node.parentId]) {let parent = indexes[node.parentId];node.parent = parent;node.list = parent.children;parent.children.push(node);}});return root;},filterNode(value, data) {if (!value) {return true;}return data.name.indexOf(value) !== -1;},selectFilter(val) {this.$refs.tree.filter(val);},setCheckedKey(ids) {this.$refs.tree.setCheckedKeys(ids);}}
};
</script><style lang="less">
@import (reference) "~@/common/util.less";.mpks-common-tree {height: 100%;border: 1px solid #eee;.mpks-common-tree-header {padding: 0 0 0 24px;height: 40px;background: #f9f9f9;line-height: 40px;color: #666;}.mpks-common-tree-header-button {padding: 13px 10px 13px 0;}.mpks-common-tree-node-title {.line-clamp(1);// margin-top: 4px;margin-right: 40px;color: #151b26;}.mpks-common-tree-node-permission {position: relative;width: 30px;text-align: center;color: #999;&:after {position: absolute;top: 6px;left: 6px;width: 17px;height: 0;border-top: 1px solid #999;transform: rotate(45deg);content: " ";}}.mpks-common-tree-node-control-wrapper {position: absolute;top: 0;right: 0;}.mpks-common-tree-node-control {width: 30px;text-align: center;background: #fff;visibility: hidden;}.el-tree-node:focus > .el-tree-node__content .mpks-common-tree-node-control,.el-tree-node__content:hover .mpks-common-tree-node-control,.mpks-common-tree-node-control:hover {background: #f5f7fa;}.el-tree--highlight-current.el-tree-node.is-current> .el-tree-node__content.mpks-common-tree-node-control,.el-tree--highlight-current.el-tree-node.is-current> .el-tree-node__content.mpks-common-tree-node-control:hover {background-color: #ebf4fd;}.mpks-common-tree-node-control:hover {color: #0073eb;}.el-tree-node {position: relative;}.el-tree-node__content {font-size: 14px;height: 24px;line-height: 24px;overflow-x: scroll;margin-top: 4px;&:hover {.mpks-common-tree-node-control {visibility: visible;}}}// .el-tree .el-icon-caret-right:before {//     background: url('~@/assets/icon/arrowDown.svg') no-repeat 0 3px;//     content: '\9B';//     display: block;//     height: 16px;//     font-size: 16px;//     background-size: 16px;// }.mpks-common-tree-dialog-tips {color: #666;}.mpks-common-tree-dialog-select {width: 100%;}.mpks-common-tree-filter {// background: #f9f9f9;padding: 0 4px 4px;.el-input__inner {// border: none;font-size: 12px;border-radius: 6px;height: 30px;}.el-input__suffix {display: flex;align-items: center;height: 30px;cursor: pointer;}}
}.mpks-common-tree-node-control-disabled {visibility: hidden;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/27040.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

matplotlib库的用法——各种图的绘制

matplotlib库的用法——各种图的绘制

matplotlib是一个流行的Python绘图库&#xff0c;用于创建各种静态、动态、交互式可视化。以下是一些基本的用法&#xff1a; 线图 plt.plot([1, 2, 3, 4]) plt.ylabel(Some Numbers) plt.show()散点图 x [1,2,3,4,5] y [2,3,4,5,6] plt.scatter(x, y) plt.show() 条形图 …
阅读更多...
sklearn中使用决策树

sklearn中使用决策树

1.示例 criterion可以是信息熵&#xff0c;entropy&#xff0c;可以是基尼系数gini # -*-coding:utf-8-*- from sklearn import tree from sklearn.datasets import load_wine from sklearn.model_selection import train_test_split wineload_wine()# print ( wine.feature_…
阅读更多...
【2.3】Java微服务：sentinel服务哨兵

【2.3】Java微服务：sentinel服务哨兵

✅作者简介&#xff1a;大家好&#xff0c;我是 Meteors., 向往着更加简洁高效的代码写法与编程方式&#xff0c;持续分享Java技术内容。 &#x1f34e;个人主页&#xff1a;Meteors.的博客 &#x1f49e;当前专栏&#xff1a;Java微服务 ✨特色专栏&#xff1a; 知识分享 &…
阅读更多...
css-3：什么是响应式设计？响应式的原理是什么？如何做？

css-3：什么是响应式设计？响应式的原理是什么？如何做？

1、响应式设计是什么&#xff1f; 响应式网站设计&#xff08;Responsive WEB desgin&#xff09;是一个网络页面设计布局&#xff0c;页面的设计与开发应当根据用户行为以及设备环境&#xff08;系统平台、屏幕尺寸、屏幕定向等&#xff09;进行相应的相应和调整。 描述响应式…
阅读更多...
ensp与虚拟机搭建测试环境

ensp与虚拟机搭建测试环境

1.虚拟机配置 ①首先确定VMnet8 IP地址&#xff0c;若要修改IP地址&#xff0c;保证在启动Ensp前操作 ②尽量保证NAT模式 2.ensp配置 (1)拓扑结构 (2)Cloud配置 ①首先点击 绑定信息 UDP → 增加 ②然后点击 绑定信息 VMware ... → 增加 ③最后在 端口映射设置上点击双向通…
阅读更多...
Hive创建外部表详细步骤

Hive创建外部表详细步骤

① 在hive中执行HDFS命令&#xff1a;创建/data目录 hive命令终端输入&#xff1a; hive> dfs -mkdir -p /data; 或者在linux命令终端输入&#xff1a; hdfs dfs -mkdir -p /data; ② 在hive中执行HDFS命令&#xff1a;上传/emp.txt至HDFS的data目录下&#xff0c;并命名为…
阅读更多...
jmeter工具测试和压测websocket协议【杭州多测师_王sir】

jmeter工具测试和压测websocket协议【杭州多测师_王sir】

一、安装JDK配置好环境变量&#xff0c;安装好jmeter 二、下载WebSocketSampler发送请求用的&#xff0c;地址&#xff1a;https://bitbucket.org/pjtr/jmeter-websocket-samplers/downloads/?spma2c4g.11186623.2.15.363f211bH03KeI 下载解压后的jar包放到D:\JMeter\apache-j…
阅读更多...
2.Flink应用

2.Flink应用

2.1 数据流 DataStream&#xff1a;DataStream是Flink数据流的核心抽象&#xff0c;其上定义了对数据流的一系列操作DataStreamSource&#xff1a;DataStreamSource 是 DataStream 的 起 点 &#xff0c; DataStreamSource 在StreamExecutionEnvironment 中 创 建 &#xff0c;…
阅读更多...
init_pg_dir 的大小及作用

init_pg_dir 的大小及作用

init_pg_dir 的大小 vmlinux.lds.S 中 在vmlinux.lds.S 中&#xff0c;有 init_pg_dir .; . INIT_DIR_SIZE; init_pg_end .;/*include/asm/kernel-pgtable.h*/ #define EARLY_ENTRIES(vstart, vend, shift) \ ((((vend) - 1) >&g…
阅读更多...
基于 CentOS 7 构建 LVS-DR 群集

基于 CentOS 7 构建 LVS-DR 群集

文章目录 前言1、LVS集群2、DR模式的工作流程图 一、LVS DR模式的配置二、配置步骤总结 前言 什么是LVS集群&#xff1f;DR模式&#xff1f; 1、LVS集群 LVS采用的是合入内核模块&#xff0c;先把对于nginx来说要稳定很多&#xff0c;性能和稳定都在一定层度上占据优势&…
阅读更多...
【ChatGPT 指令大全】怎么使用ChatGPT写履历和通过面试

【ChatGPT 指令大全】怎么使用ChatGPT写履历和通过面试

目录 怎么使用ChatGPT写履历 寻求履历的反馈 为履历加上量化数据 把经历修精简 为不同公司客制化撰写履历 怎么使用ChatGPT通过面试 汇整面试题目 给予回馈 提供追问的问题 用 STAR 原则回答面试问题 感谢面试官的 email 总结 在职场竞争激烈的今天&#xff0c;写一…
阅读更多...
linux网络编程--线程池UDP

linux网络编程--线程池UDP

目录 学习目标 1线程池 2.UDP通信 3本地socket通信 学习目标 了解线程池模型的设计思想能看懂线程池实现源码掌握tcp和udp的优缺点和使用场景说出udp服务器通信流程说出udp客户端通信流程独立实现udp服务器代码独立实现udp客户端代码熟练掌握本地套接字进行本地进程通信 1…
阅读更多...
FreeRTOS源码分析-10 互斥信号量

FreeRTOS源码分析-10 互斥信号量

目录 1 事件标志组概念及其应用 1.1 事件标志组定义 1.2 FreeRTOS事件标志组介绍 1.3 FreeRTOS事件标志组工作原理 2 事件标志组应用 2.1 功能需求 2.2 API 2.3 功能实现 3 事件标志组原理 3.1 事件标志组控制块 3.2 事件标志组获取标志位 3.3 等待事件标志触发 3.4…
阅读更多...
小程序的api使用 以及一些weui组件实列获取头像 扫码等

小程序的api使用 以及一些weui组件实列获取头像 扫码等

今日目标 响应式单位rpx小程序的生命周期 【重点】20%小程序框架 weui 【重点】 50%内置API 【重点】30%综合练习 1. 响应式rpx 1.1 rpx单位 rpx是微信小程序提出的一个尺寸单位&#xff0c;将整个手机屏幕宽度分为750份&#xff0c;1rpx 就是 1/750&#xff0c;避免不同手…
阅读更多...
QT自带PDF库的使用

QT自带PDF库的使用

QT自带PDF库可以方便的打开PDF文件&#xff0c;并将文件解析为QImage&#xff0c;相比网上提供的开源库&#xff0c;QT自带PDF库使用更方便&#xff0c;也更加可靠&#xff0c;然而&#xff0c;QT自带PDF库的使用却不同于其他通用库的使用&#xff0c;具备一定的技巧。 1. 安装…
阅读更多...
以太网DHCP协议(十)

以太网DHCP协议(十)

目录 一、工作原理 二、DHCP报文 2.1 DHCP报文类型 2.2 DHCP报文格式 当网络内部的主机设备数量过多是&#xff0c;IP地址的手动设置是一件非常繁琐的事情。为了实现自动设置IP地址、统一管理IP地址分配&#xff0c;TCPIP协议栈中引入了DHCP协议。 一、工作原理 使用DHCP之…
阅读更多...
通向架构师的道路之weblogic与apache的整合与调优

通向架构师的道路之weblogic与apache的整合与调优

一、BEAWeblogic的历史 BEA WebLogic是用于开发、集成、部署和管理大型分布式Web应用、 网络应用和数据库应 用的Java应用服务器。将Java的动态功能和Java Enterprise标准的安全性引入大型网络应用的 开发、集成、部署和管理之中。 BEA WebLogic Server拥有处理关键Web应…
阅读更多...
pytorch求导

pytorch求导

pytorch求导的初步认识 requires_grad tensor(data, dtypeNone, deviceNone, requires_gradFalse)requires_grad是torch.tensor类的一个属性。如果设置为True&#xff0c;它会告诉PyTorch跟踪对该张量的操作&#xff0c;允许在反向传播期间计算梯度。 x.requires_grad 判…
阅读更多...
TM4C123库函数学习（1）--- 点亮LED+TM4C123的ROM函数简介+keil开发环境搭建

TM4C123库函数学习（1）--- 点亮LED+TM4C123的ROM函数简介+keil开发环境搭建

前言 &#xff08;1&#xff09; 首先&#xff0c;我们需要知道TM4C123是M4的内核。对于绝大多数人而言&#xff0c;入门都是学习STM32F103&#xff0c;这款芯片是采用的M3的内核。所以想必各位对M3内核还是有一定的了解。M4内核就是M3内核的升级版本&#xff0c;他继承了M3的的…
阅读更多...
【力扣每日一题】2023.8.5 合并两个有序链表

【力扣每日一题】2023.8.5 合并两个有序链表

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们两个有序的链表&#xff0c;要我们保持升序的状态合并它们。 我们可以马上想要把两个链表都遍历一遍&#xff0c;把所有节点的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023