户型图在哪个网站找,网站续费价格,石家庄室内设计公司排名,上海做产地证在哪个网站录入需求#xff1a;el-tree目录实现搜索查询el-table表格项#xff0c;双击表格项根据yiZhuMLID||muLuID定位el-tree目录#xff0c;并且高亮展示在可视化区域内#xff0c;再重新根据el-tree目录的yiZhuMLID搜索刷新el-table表格#xff0c;定位且高亮展示相对应的yiZhuMLID…需求el-tree目录实现搜索查询el-table表格项双击表格项根据yiZhuMLID||muLuID定位el-tree目录并且高亮展示在可视化区域内再重新根据el-tree目录的yiZhuMLID搜索刷新el-table表格定位且高亮展示相对应的yiZhuMLID的需求
1、先上DOM代码 div classmaindiv classleftel-treereftreeclasstree:datalabWorkOptions:propsdefaultPropsnode-keyyiZhuMLID:default-expanded-keyscurrentNodekeyhighlight-currentnode-clickhandleNodeClick//divdiv classcenter// 封装的el-table(后面加上)PublicTablerefmultipleTablerow-key$multipleTableclasstable:is-need-paginationfalse:table-datacenterTableData:table-infotableInfo:need-selecttrue:table-columncenterColumns:eventscenterEvents:has-operationfalse/div classcenterSearchel-inputv-modelqueryStringclasssizesmallclearableplaceholder请输入格式拼音/五笔首码搜索clearonSearchkeyup.enter.nativeonSearch/el-buttonsizesmallclassel-button-colorstylemargin-right: 10pxiconel-icon-searchclickonSearch查询/el-button/div/divdiv classrightPublicTablerefpublicTableclasstable:is-need-paginationfalse:table-datarightData:table-infotableInfo:table-columnrightColumns:has-operationfalse//div/div
2、样式Style代码
style langscss scoped
::v-deep .el-table__body-wrapper {overflow: auto;
}
.title {font-size: 15px;font-weight: 600;padding: 0 8px;border-left: 3px solid #21c5c8;
}
.main {display: flex;width: 100%;height: 100%;.left {flex: 1;max-width: 25%;overflow: auto;::v-deep .tree {height: 500px;}}.center {max-width: 29%;height: 500px;.centerSearch {display: flex;flex-direction: row;}.table {height: calc(500px - 15px);overflow: auto;}}.right {flex: 1;max-width: 50%;height: 500px;}
}
::v-deep .handle-dialog {height: 100%;margin-top: 10px;
}
::v-deep .el-table__header-wrapper .el-checkbox {display: none;
}
/style3、JS代码
script
import {getHYXMMXWHByIdItem,getItemByPinyinWubi
} from /api/menZhenAPI/huaYanjiChu/huaYanXMMLMXWH
export default {name: HuaYanMNKDDialog,props: {labWorkOptions: {type: Array,default: () []},value: {type: Boolean,default: false},data: {type: Object,default: () ({})},rightTableData: {type: Array,default: () []}},data() {return {currentNodekey: [],formData: {},yiZhuMLID: ,queryString: ,leftTableData: [],centerTableData: [],tableData: [],defaultProps: {children: children,label: yiZhuMLMC},addData: [],tableInfo: {},rightData: [],leftEvents: {row-click: (row) {this.getHuaYanXMById(row)}},centerEvents: {select: (selection, row) {console.log(selection, selection)console.log(row, row)const flag this.rightData.findIndex((item) item.huaYanID row.huaYanID)if (flag -1) {if (row.lianDongHao ! null) {this.centerTableData.forEach((item) {if (item.lianDongHao row.lianDongHao) {this.rightData.push({muLuID: item.muLuId,huaYanID: item.huaYanID,huaYanXMMC: item.huaYanXMMC,paiXu: item.paiXu,lianDongHao: item.lianDongHao,zhuCiXiang: null})console.log(item, item)console.log(this.rightData, this.rightData)}})} else {this.rightData.push({muLuID: row.muLuId,huaYanID: row.huaYanID,huaYanXMMC: row.huaYanXMMC,paiXu: row.paiXu,lianDongHao: row.lianDongHao,zhuCiXiang: null})console.log(this.rightData)}} else {if (row.lianDongHao null) {this.rightData.splice(flag, 1)} else {this.centerTableData.forEach((item) {if (item.lianDongHao row.lianDongHao) {const index this.rightData.findIndex((item) item.huaYanID row.huaYanID)this.rightData.splice(index, 1)}})}this.$refs.multipleTable.getTableRef().clearSelection()}this.chenckByHuaYanID()},// 这是主要方法其他地方的函数方法可以尽量不看row-dblclick: (row) {const currentKey row.yiZhuMLID || row.muLuIDthis.$nextTick(() {// tree节点的id// this.currentNodekey row.yiZhuMLID || row.muLuIDthis.currentNodekey []for (let i 0; i this.$refs.tree.store._getAllNodes().length; i) {if (currentKey this.$refs.tree.store._getAllNodes()[i].data.yiZhuMLID) {this.$refs.tree.setCurrentKey(currentKey)this.currentNodekey.push(currentKey)}}getHYXMMXWHByIdItem(currentKey).then((res) {if (res.data) {console.log(row)this.centerTableData res.datathis.chenckByHuaYanID()// 获取数据后定位setTimeout(() {this.$tools.tableLocateKey(row.huaYanID,huaYanID,this.centerTableData,this.$refs[multipleTable].$refs.tableData)}, 200)// 让高亮元素出现在视图区域document.querySelector(.el-tree--highlight-current .el-tree-node.is-current.el-tree-node__content).scrollIntoView()}})})}},leftColumns: [{label: 化验项目名称,prop: mingCheng,minWidth: 120px}],centerColumns: [{label: 请选择化验项目,prop: huaYanXMMC,minWidth: 120px}],rightColumns: [{prop: huaYanXMMC,label: 化验项目名称,minWidth: 150px},{prop: ,label: 类别,minWidth: 50px},{prop: ,label: 医保类别,minWidth: 80px},{prop: ,label: 目录名称,minWidth: 80px},{prop: ,label: 状态标志,minWidth: 80px},{prop: ,label: 医嘱备注,minWidth: 80px},{prop: ,label: 首次录入时间,minWidth: 120px},{prop: ,label: 医嘱用户,minWidth: 80px}],operations: [{text: 删除,type: text,class: el-text-color-del,callback: (row) {this.delHandleCancelFormClick(row)}}]}},computed: {visible: {get() {return this.value},set(value) {this.$emit(update:value, false)}}},watch: {visible(val) {if (val) {this.rightData Object.assign([], this.rightTableData)this.queryString } else {this.centerTableData []}}},created() {},methods: {onSearch() {getItemByPinyinWubi({key: this.queryString,zhenLiaoLX: this.data.zhenLiaoLX}).then((res) {if (res) {this.centerTableData res.data.map((item) {return {huaYanID: item[huaYanID],huaYanXMMC: item[huaYanMC],yiZhuMLID: item[yiZhuMLID],yiZhuMLMC: item[yiZhuMLMC]}})this.queryString }})},}
}
/script
4、el-table的封装
templatediv classtable-boxel-tablereftableDatav-loadingloadingstylewidth: 100%:row-keyrowKey:datatableData:heighttableHeighthighlight-current-rowv-bindtableInfo:span-methodobjectSpanMethodv-oneventsselection-changehandleSelectionChangeslot nameexpand /el-table-column v-ifselectAllTemplate min-width140 label全选模板列表template slot-scope{ row }divel-checkboxv-modelrow.allchangemuBanAllToggleSelection($event, tableData, row){{ row.muBanMC }}/el-checkbox/div/template/el-table-column!-- 多选 --el-table-columnv-ifneedSelecttypeselectionreserve-selectionwidth55aligncenter/el-table-column v-ifhasIndex label序号 width50 typeindex /template v-for(item, index) in tableColumn!-- 此列需要自定义 --el-table-columnv-ifitem.isSlot:key% index:show-overflow-tooltipshowOverflowTooltipv-binditem:render-headeritem.renderHeaderv-oneventstemplate slot-scope{ row, $index }ex-slotv-ifitem.render:renderitem.render:rowrow:index$index:columnitem:classitem.prop:default-valueitem.defaultValue/slot v-else :nameitem.prop :rowrow //template/el-table-column!-- 正常列 --el-table-columnv-else:key% index:show-overflow-tooltipshowOverflowTooltipv-binditemv-onevents//templateel-table-column v-ifhasOperation fixedright label操作 :min-widthoperationWidth!-- template v-if!btnButton || btnButton.length 0 slot-scopescopeslot nameoperation :rowscope.row :indexscope.$index //template --template v-ifbtnButton.length slot-scope{ row, column, $index }el-buttonv-for(value, i) in btnButton:key$ isizesmall:typevalue.type:iconvalue.icon:classvalue.classclickvalue.callback(row, column, $index){{ value.text }}/el-button/template/el-table-column/el-table!-- 分页 --divv-ifisNeedPaginationstyledisplay: flex; justify-content: flex-end; align-item: centerl; padding-top: 15pxel-paginationrefpagination:page-sizespageSizes:page-size.synccomputedPageSize:hide-on-single-pageisSinglePageHidelayouttotal, sizes, prev, pager, next, jumper:current-page.synccomputedCurrentPage:totaltotal:pager-countpagerCountcurrent-changecurrentChangesize-changesizeChange//div/div
/template
script
// 自定义组件的内容
const exSlot {functional: true,props: {row: Object,render: Function,index: Number,column: {type: Object,default: null},defaultValue: [Number, String]},render: (h, ctx) {const params {row: ctx.props.row,index: ctx.props.index}const defaultValue ctx.props.defaultValueparams.column ctx.props.column || {}return h(div,{class: [params.column.prop || ,params.column.class || params.column.className || ].join()},[ctx.props.render(h, params) || defaultValue])}
}
export default {name: PublicTable,components: {ex-slot: exSlot},props: {// keyrowKey: {type: String,default: },// 超出行是否隐藏不换行showOverflowTooltip: {type: Boolean,default: true},// 是否需要多选needSelect: {type: Boolean,default: false},// 是否需要序号hasIndex: {type: Boolean,default: false},// 是否需要分页isNeedPagination: {type: Boolean,default: true},// 是否单页隐藏默认为trueisSinglePageHide: {type: Boolean,default: false},// 当前页页码支持.sync修饰符currentPage: {type: Number,default: 1},// 页码显示数据量pagerCount: {type: Number,default: 7},// 每页数据条数, 支持.sync修饰符默认为每页10条pageSize: {type: Number,default: 20},// 数据总条数total: {type: Number,default: 0},// 每页多少数据pageSizes: {type: Array,required: false,default: () [20, 40, 80, 100]},tableInfo: {type: Object,default: () {}},// 获取数据时是否需要加载loadingloading: {type: Boolean,default: false},tableData: {type: Array,default: () []},// 表格展示数据tableColumn: {type: Array,default: () []},// 是否需要操作列hasOperation: {type: Boolean,default: true},// 操作列btnButton: {type: Array,default: () []},// 操作列宽度operationWidth: {type: String,default: 120px},// 表格方法events: {type: Object,default: () {}},templateSelectAll: {type: Boolean,default: false},// 合并单元格objectSpanMethod: {type: Function,default: () {}},muBanAllToggleSelection: {type: Function,default: () {}},selectAllTemplate: {type: Boolean,default: false}},data() {return {}},computed: {computedCurrentPage: {get() {return this.currentPage},set(val) {this.$emit(update:currentPage, val)}},computedPageSize: {get() {return this.pageSize},set(val) {this.$emit(update:pageSize, val)}},tableHeight() {return !this.isNeedPagination ? 100% : calc(100% - 47px)}},mounted() {},methods: {getTableRef() {return this.$refs.tableData},getRefPagination() {return this.$refs.pagination},// 页面切换事件 通过 currentChange 绑定currentChange(val) {this.$emit(currentChange, val)},// 每页条数切换事件通过sizeChange 绑定sizeChange(val) {this.$emit(sizeChange, val)},handleSelectionChange(val) {this.$emit(selectionChange, val)}}
}
/script
style langscss scoped
.table-box {flex: 1;overflow: hidden;width: 100%;height: 100%;
}
/style5、el-table定位数据高亮的方法
/*** table表格数据定位* param {value} 查询的value唯一值* param {tabKey} tableData数据中的key属性* param {tableData} table表格数据源tableData* param {tableRefs} table表格标签tableRefs* returns*/
function tableLocateKey(value, tabKey, tableData, tableRefs) {let index tableData.findIndex((i) {return value i[tabKey]})let vm tableRefs.$elvm.querySelectorAll(.el-table__body tr)[index].scrollIntoView()//让定位到的这条数据产生高亮效果tableRefs.setCurrentRow(tableData[index])
}
