显示和隐藏table中的border

<table border="1" bordercolor="#FF9966" >
<tr>
<td width="102" style="border-right-style:none">隐藏右边框</td>
<td width="119" style="border-left-style:none">隐藏左边框</td>
</tr>
<tr>
<td style="border-top-style:none">隐藏上边框</td>
<td style="border-bottom-style:none">隐藏下边框</td>
</tr>
</table>

<table>
<tr>
<td style="border-right:#cccccc solid 1px;">显示右边框</td>
<td style="border-left:#cccccc solid 1px;">显示左边框</td>
<td style="border-top:#cccccc solid 1px;">显示上边框</td>
<td style="border-bottom:#cccccc solid 1px;">显示下边框</td>
</tr>
</table>

<table>
<tr>
<td style="border-right : thin dashed blue;">右边框显示细虚线</td>
<td style="border-bottom: thick dashed yellow;">左边框显示粗虚线</td>
<td style="border-top: double green;">上边框显示两条线</td>
<td style="border-left: dotted red;">下边框显示点</td>
</tr>
</table>

### 实现 Element UI `el-table` 自定义列显示隐藏 为了实现在Element UI中的`<el-table>`组件内自定义列的显示隐藏功能,可以采用创建一个控制面板来管理哪些列应该被展示或隐藏的方式[^1]。 通过维护一个状态列表,该列表记录每一列当前的状态(即是否可见),可以在渲染表格之前依据此状态决定每列的数据是否加入到最终呈现给用户的表格结构中。具体来说,在Vue实例里设置一个对象或者数组用来保存各个字段对应的布尔值表示其可视性;接着利用计算属性根据这些标志位过滤实际要传递给`columns`配置项的内容。 下面是一个简单的例子说明如何实现这一特性: ```html <!-- HTML部分 --> <div id="app"> <template> <!-- 控制栏:勾选框组用于切换不同列的显隐 --> <div style="margin-bottom:20px;"> <label v-for="(item, index) in columns" :key="index"> <input type="checkbox" v-model="selectedColumns" :value="item.prop">{{ item.label }} </label> </div> <!-- 表格主体 --> <el-table :data="tableData" border stripe> <el-table-column v-for="(column, idx) of visibleColumns" :key="idx" :prop="column.prop" :label="column.label"></el-table-column> </el-table> </template> </div> ``` ```javascript // JavaScript (Vue.js) 部分 new Vue({ el: '#app', data() { return { // 定义初始所有的列信息 columns: [ { prop: 'date', label: '日期' }, { prop: 'name', label: '姓名' }, { prop: 'address', label: '地址' } ], selectedColumns: ['date', 'name'], // 默认选中的tableData: [{ date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' }, /* ... */ ] }; }, computed: { // 计算出当前应显示的列集合 visibleColumns() { return this.columns.filter(column => this.selectedColumns.includes(column.prop)); } } }); ``` 上述代码片段展示了怎样构建一个基础版本的支持列选择性的显示/隐藏机制。这里的关键在于使用了`v-model`指令绑定复选框的选择情况至`selectedColumns`变量,并且借助于计算属性`visibleColumns`动态调整真正参与视图更新的那一部分内容。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值