东莞网络推广策略,googleseo專業,微信小程序卖货,中国建设网官网查询登录入口前言 在数据分析和数据处理的过程中#xff0c;经常需要对比两个数据集#xff0c;以便发现其中的差异和变化。本文将介绍如何使用 el-table 组件来对比两个数据集#xff0c;并通过差异数据的突显标记#xff0c;帮助用户更直观地理解数据的变化。 cell-style 属性
其实利…前言 在数据分析和数据处理的过程中经常需要对比两个数据集以便发现其中的差异和变化。本文将介绍如何使用 el-table 组件来对比两个数据集并通过差异数据的突显标记帮助用户更直观地理解数据的变化。 cell-style 属性
其实利用 el-table 组件中的 cell-style 属性处理这个功能非常简单它允许开发者通过提供对象或返回样式的函数来自定义每个单元格的样式通过这个特性我们就可以很轻松的实现这个功能。
el-table :dataproductList.tableOne :cell-stylegetCellStyle(参数1, 参数2,...)/el-table核心代码 getCellStyle(currentData, compareToData) {return ({ rowIndex, column }) {const { property } column;const currentValue currentData[rowIndex]?.[property];const compareToValue compareToData[rowIndex]?.[property];return currentValue ! compareToValue ? { color: red } : null;};
},首先在 getCellStyle 函数中会接受两个参数 currentData 和 compareToData。这个函数会返回一个回调函数用于设置表格单元格的样式回调函数接受一个参数 { rowIndex, column }其中 rowIndex 是当前行的索引column 是当前列的信息。函数内部通过 column 获取到属性名 property然后函数通过索引 rowIndex 和属性名 property 从 currentData 和 compareToData 中获取对应的值 currentValue 和 compareToValue最后函数判断 currentValue 和 compareToValue 是否相等如果不相等则返回一个样式对象 { color: red }表示将单元格的文字颜色设置为红色如果相等则返回 null表示不设置样式。 实现效果 完整功能代码
index.vue
templatedivel-button typesuccess clickversion版本对比/el-buttondivselect-dialog:dialogChild.syncselectDialog.dialogLsattr:dialogRowselectDialog.dialogRow//div/div
/template
script
import selectDialog from ./components/selectDialog;
export default {components: {select-dialog: selectDialog,},data() {return {selectDialog: {dialogRow: {},dialogLsattr: false,},};},methods: {version() {this.selectDialog.dialogLsattr true;},},
};
/scriptcomponents/selectDialog.vue
templateel-dialogtitle版本选择width40%:close-on-click-modalfalse:visible.syncdialogVisiblecloseclosediv classselectCondiv classtransferdiv classnavdiv classtitlespan版本列表/spanspan{{ count }}/{{ list.length }}/span/divdiv classsearchel-inputv-modelsearchValclearableprefix-iconel-icon-searchplaceholder版本号inputsearchVersions/el-input/div/divdiv classcheckboxsdivv-for(item, index) in searchVal ? searchResult : list:keyindexclicktoggleCheckbox(item)el-checkboxv-modelchecked[item]:disabledcount 2 !checked[item]changetoggleCheckbox(item){{ item }}/el-checkbox/divel-emptyv-if!list.length || (searchVal !searchResult.length)description暂无数据/el-empty/div/divdiv classsubBtnel-button typeprimary :disabledcount 2 clicksubmit对比/el-buttonel-buttonstylemargin-left: 10pxclick$emit(update:dialogChild, false)取消/el-button/div/divdivdetails-drawer:drawerChild.syncdetailsDrawer.drawerLsattr:drawerRowdetailsDrawer.drawerRow//div/el-dialog
/template
script
import detailsDrawer from ./detailsDrawer;
export default {components: {details-drawer: detailsDrawer,},props: {dialogChild: {type: Boolean,default: function () {return false;},},dialogRow: {type: Object,default: function () {return {};},},},data() {return {searchVal: , //搜索值checked: {}, //选中的checkboxlist: [version1,version2,version3,version4,version5,version6,version7,version8,version9,version10,version11,version12,version13,version14,version15,version16,], //模拟全部数据列表searchResult: [], // 搜索结果列表dialogVisible: false, //弹框状态detailsDrawer: {//抽屉传递数据drawerRow: {},drawerLsattr: false,},};},computed: {// 动态计算当前选中的checkbox数量count: function () {return Object.values(this.checked).filter(Boolean).length;},},watch: {dialogChild: {handler(newName, oldName) {this.dialogVisible newName;this.list.forEach((item) {this.$set(this.checked, item, false);});},deep: true,},dialogRow: {handler(newName, oldName) {},deep: true,},},methods: {// 当前行切换复选框的选中状态toggleCheckbox(item) {if (!(this.count 2 !this.checked[item])) {this.checked[item] !this.checked[item];}},// 搜索searchVersions() {const keyword this.searchVal.trim(); // 获取输入框的值并去除首尾空格if (keyword ) {this.searchResult [];return;}this.searchResult this.list.filter((item) item.includes(keyword));console.log(搜索结果, this.searchResult);},// 对比submit() {console.log(this.checked);this.detailsDrawer.drawerLsattr true;},// 关闭弹框close() {this.$emit(update:dialogChild, false);this.checked {};this.searchVal ;this.searchResult [];},},
};
/script
style langless scoped
.selectCon {background-color: #fff;padding: 16px;.transfer {width: 100%;height: 50vh;overflow-y: auto;border-radius: 6px;border: 1px solid #ebeef5;.nav {position: sticky;top: 0;z-index: 10;background: #fff;.title {background: #f5f7fa;padding: 10px 16px;display: flex;justify-content: space-between;span:nth-child(1) {font-weight: bold;}span:last-child {color: #909399;}}.search {padding: 10px 16px 0 16px;.el-input {width: 100%;}}}.checkboxs {padding: 10px 16px;div:hover {cursor: pointer;background: #f5f7fa;}.el-checkbox {margin: 3px 6px;}.el-checkbox:hover {color: #296bff;}}}.subBtn {margin-top: 16px;display: flex;justify-content: right;}
}
/stylecomponents/detailsDrawer.vue
templateel-drawer:append-to-bodytrue:close-on-click-modalfalse:visible.syncdrawerVisibledirectionrtlsize100%title版本对比close$emit(update:drawerChild, false)div classversionsConh4标题1/h4el-card classbox-carddiv classitemContrastel-table:dataproductList.tableOneborder:cell-stylegetCellStyle(productList.tableOne, productList.tableTwo)el-table-column propaaa label名称1/el-table-columnel-table-column propbbb label名称2 /el-table-columnel-table-column propccc label名称3/el-table-column/el-tableel-table:dataproductList.tableTwoborder:cell-stylegetCellStyle(productList.tableOne, productList.tableTwo)el-table-column propaaa label名称1/el-table-columnel-table-column propbbb label名称2 /el-table-columnel-table-column propccc label名称3/el-table-column/el-table/div/el-cardh4标题2/h4el-card classbox-carddiv classitemContrastel-table:datainventoryList.tableOneborder:cell-stylegetCellStyle(inventoryList.tableOne, inventoryList.tableTwo)el-table-column propaaa label名称1/el-table-columnel-table-column propbbb label名称2 /el-table-columnel-table-column propccc label名称3/el-table-columnel-table-column propddd label名称4/el-table-column/el-tableel-table:datainventoryList.tableTwoborder:cell-stylegetCellStyle(inventoryList.tableOne, inventoryList.tableTwo)el-table-column propaaa label名称1/el-table-columnel-table-column propbbb label名称2 /el-table-columnel-table-column propccc label名称3/el-table-columnel-table-column propddd label名称4/el-table-column/el-table/div/el-card/div/el-drawer
/template
script
export default {props: {drawerChild: {type: Boolean,default: function () {return false;},},drawerRow: {type: Object,default: function () {return {};},},},data() {return {drawerVisible: false, //抽屉状态productList: {tableOne: [{aaa: 2024,bbb: 描述,ccc: abc,},{aaa: 2024,bbb: 描述,ccc: abcd,},],tableTwo: [{aaa: 2024,bbb: 描述xx,ccc: abc,},{aaa: 2025,bbb: 描述,ccc: abc,},],},inventoryList: {tableOne: [{aaa: 2024,bbb: 描述,ccc: abc,ddd: ,},{aaa: 2024,bbb: 描述,ccc: abc,ddd: ^%$,},],tableTwo: [{aaa: 2024,bbb: 描述,ccc: abc,ddd: */-,},],},};},watch: {drawerChild: {handler(newName, oldName) {this.drawerVisible newName;},deep: true,},drawerRow: {handler(newName, oldName) {},deep: true,},},methods: {// 比较数据并返回颜色getCellStyle(currentData, compareToData) {return ({ rowIndex, column }) {const { property } column;const currentValue currentData[rowIndex]?.[property];const compareToValue compareToData[rowIndex]?.[property];return currentValue ! compareToValue ? { color: red } : null;};},},
};
/script
style langless scoped
.versionsCon {padding: 0px 36px;.itemContrast {display: flex;justify-content: space-between;.el-table:first-child {margin-right: 16px;}}.el-card {margin: 16px 0;}
}
::v-deep {.el-drawer__header :first-child {font-size: 18px;font-weight: bold;color: #303133;display: flex;justify-content: center;}.el-drawer__header {margin-bottom: 16px;}
}
/style实现效果 相关推荐
⭐ 微信小程序开发实战利用差异对比显示对象属性变化 ⭐ element中el-table根据状态改变样式你不能错过的技能
