如何开发一个手机网站,制作短视频的软件app,上海手机网站,怎样在建设部网站上查公司信息所在前面的话#xff0c;我是个前端小白#xff0c;大佬请绕行#xff0c;可能大佬觉得很简单#xff0c;但是我真的花了好几个小时去解决#xff0c;所以记录一下#xff0c;下次也可以作为参考。
我主要是以第二种方式进行修改的
开门见山
简述问题#xff1a;大家…所在前面的话我是个前端小白大佬请绕行可能大佬觉得很简单但是我真的花了好几个小时去解决所以记录一下下次也可以作为参考。
我主要是以第二种方式进行修改的
开门见山
简述问题大家都知道Redis集群类型可分为Master-Slave和Cluster两种类型而Master-Slave是实例Cluster为分片。由于展示字段方面也一样那么问题来了如何在一个界面里面展示
先简单展示下效果
这是Master-Slave界面的展示效果 这是Cluster界面的展示效果 我们大概率也不会做两个界面那么如何在一个界面里面实现这种效果呢
实现方式一 el-table el-table-column 形式
要在 Vue 中的动态表格中添加数据列并通过字段控制显示和隐藏可以按照以下步骤进行
1、在表格中添加要动态添加的列例如
el-table :datatableData stylewidth: 100%el-table-column propdate label日期 width180/el-table-columnel-table-column propname label姓名 width180/el-table-column!-- 定义名为 newColumn 的插槽用于动态添加数据列 --template v-slot:newColumn{ row }!-- 根据 row 对象中的字段来判断是否显示此列 --el-table-column v-ifrow.showNewColumn propnewColumn label新数据列 width180/el-table-column/templateel-table-column propaddress label地址/el-table-columnel-table-column fixedright label操作 width100template v-slotscopeel-button clickhandleEdit(scope.$index, scope.row)编辑/el-buttonel-button clickhandleDelete(scope.$index, scope.row)删除/el-button/template/el-table-column
/el-table在上面的代码中我们定义了一个名为 “newColumn” 的插槽并在其中添加了一个数据列该数据列的显示与否取决于当前行数据中的 showNewColumn 字段。
2、在表格数据中添加相应的字段和数据例如
data() {return {tableData: [{date: 2023-04-11,name: 张三,newColumn: 这是一列新数据,showNewColumn: true,address: 上海市普陀区金沙江路 1518 弄,},{date: 2023-04-12,name: 李四,newColumn: ,showNewColumn: false,address: 上海市普陀区金沙江路 1517 弄,},// ...]}
}在上面的代码中我们在表格数据中添加了一个 newColumn 字段以及一个 showNewColumn 字段来控制该数据列的显示与否。
3、在需要动态添加数据列的地方通过修改 showNewColumn 字段来控制数据列的显示与否例如
methods: {// 添加新的数据列addNewColumn(index) {this.tableData[index].newColumn 这是一列新数据;this.tableData[index].showNewColumn true;},// 删除数据列removeNewColumn(index) {this.tableData[index].newColumn ;this.tableData[index].showNewColumn false;},// ...
}在上面的代码中我们通过修改 showNewColumn 字段来控制数据列的显示与否从而实现了在中间位置添加数据列并通过字段控制显示和隐藏的效果。
实现方式二 非el-table 方式
这种方式的
{prop: name,label: IP地址端口,fixed: true,minWidth: 120,align: left,},实现如下
1、首先在代码里面添加我们想要的列截图如下 具体代码如下
instanceTitle: {RedisInstances: 实例列表,RedisSentinel: Sentinel列表,},instances: {RedisInstances: [],RedisSentinel: [],},
instanceProp: {RedisInstances: [{prop: name,label: IP地址端口,fixed: true,minWidth: 120,align: left,},{prop: role,label: 实例类型,minWidth: 120,align: left,},{prop: domainName,label: 域名,minWidth: 150,align: left,},{prop: machineName,label: 所属机器,minWidth: 120,align: left,},{prop: shardingName,label: 所在分片,minWidth: 120,align: left,},{prop: idc.idcName,label: 所在机房,minWidth: 140,align: left,},{prop: state,label: 运行状态,minWidth: 100,align: left,},],RedisSentinel: [{prop: name,label: 名称,fixed: true,minWidth: 120,align: left,},{prop: idcName,label: 所在机房,minWidth: 140,align: left,},{prop: state,label: 运行状态,minWidth: 100,align: left,},],},2、找到对应的el-table 父组件,我得截图如下 具体代码如下
el-rowclasscluster-basic-info-body-rowv-for(ins, key) in instanceProp:keykeyel-card classbox-card v-ifclusterInfo.mode ! :qaediv slotheaderspan{{ instanceTitle[key] }}/span/divel-table :datainstances[key] stripe border max-height500el-table-columnv-for(item, index) in ins:keyindex:propitem.prop:labelitem.label:fixeditem.fixed:min-widthitem.shardingName null ? 0 : item.minWidth:alignitem.aligntemplate slot-scope{ row, column }el-tagv-ifcolumn.property state:typerow.state :online ? success : warningsizemini{{ util.formatEnumeration(null, null, row.state:online?在线:下线) }}/el-tag!-- span v-else-ifrow.shardingName null{{ this.$set(column, minWidth, 0) }}/span--span v-else-ifcolumn.property role{{ util.formatEnumeration(null, null, row.role) }}/spanspan v-else v-htmlutil.getColumnValue(row, column.property)/span/template/el-table-column/el-table/el-card/el-row代码解析如下 主要是使用了 v-for 指令和条件渲染的 v-if 指令来生成一个包含多个 el-card 组件的 el-row 组件。
具体来说v-for“(ins, key) in instanceProp” 表示遍历 instanceProp 对象的属性将每个属性的键值作为循环变量 key每个属性的值作为循环变量 ins然后根据这些变量来渲染组件。
v-if“clusterInfo.mode ! ‘:qae’” 表示只有当 clusterInfo.mode 不等于 ‘:qae’ 时才渲染 el-card 组件即根据不同的数据来动态生成不同的组件。
在 el-card 组件中使用了 v-for“(item, index) in ins” 来遍历 ins 对象的属性将每个属性的键值作为循环变量 index每个属性的值作为循环变量 item然后根据这些变量来渲染 el-table-column 组件。
el-table-column 组件中的各个属性用于配置列的显示方式例如 :prop“item.prop” 表示该列对应数据对象的属性名:label“item.label” 表示该列的表头标题:fixed“item.fixed” 表示该列是否固定:min-width“item.shardingName null ? 0 : item.minWidth” 表示该列的最小宽度:align“item.align” 表示该列的文本对齐方式。
在 el-table-column 组件中使用了 template 标签来定义列的内容模板使用 slot-scope 属性来指定模板的作用域。在模板中使用了 v-if 和 v-else-if 来根据列的属性值动态生成不同的内容例如 v-if“column.property ‘state’” 表示当列的属性为 state 时使用 el-tag 组件来显示状态信息。
最后整个代码块包含在 el-row 组件中使用了 :key 属性来指定组件的唯一标识。
3、代码主要修改实现如下
el-table-columnv-for(item, index) in ins:keyindex:propitem.prop:labelitem.label:fixeditem.fixed:min-widthitem.minWidth:alignitem.align改为
el-table-columnv-for(item, index) in ins:keyindex:propitem.prop:labelitem.label:fixeditem.fixed:min-widthitem.shardingName null ? 0 : item.minWidth:alignitem.alignv-ifitem.prop ! shardingName || item.prop shardingName instances[key][0].shardingName ! null总结
1、我主要修改的是第二方式身为小白我不敢乱动之前的代码所以只能在代码的基础上进行改动 2、将 ··· :min-width“item.minWidth”··· 改为 :min-width“item.shardingName null ? 0 : item.minWidth” 3、在最后添加v-if 判断 v-if“item.prop ! ‘shardingName’ || item.prop ‘shardingName’ instances[key][0].shardingName ! null”
结语
真的好简单呀但不会就是不会淦
