ElementUI的table默认勾选

// data中有两个值:docList表示table的数据源,docSelection表示默认勾选项,docTable是表格的ref
data () {
    return {
    	docList: [
    	{
	        name: '刘大',
	        nameId: 1,
	        deptname: '内科',
	        level: '主任医生'
	      },
	      {
	        name: '刘二',
	        nameId: 2,
	        deptname: '内科',
	        level: '主任医生'
	      },
	      {
	        name: '刘三',
	        nameId: 3,
	        deptname: '内科',
	        level: '主任医生'
	      },
	      {
	        name: '刘四',
	        nameId: 4,
	        deptname: '内科',
	        level: '主任医生'
	      },
	      {
	        name: '刘五',
	        nameId: 5,
	        deptname: '内科',
	        level: '主任医生'
	      }] ,
	      docSelection: [
	        {
	          name: '刘二',
	          nameId: 2,
	          deptname: '内科',
	          level: '主任医生'
	        },
	        {
	          name: '刘四',
	          nameId: 4,
	          deptname: '内科',
	          level: '主任医生'
	        }]
      }
  }
mounted () {
     let arr = []
     this.docList.forEach(item => {
        this.docSelection.forEach(val => {
          if (val.nameId === item.nameId) {
            arr.push(item)
          }
        })
      })
      this.toggleSelection(arr)  
   }
methods: {
	toggleSelection (rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.docTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.docTable.clearSelection()
      }
 }
### ElementUI 表格中勾选框占位问题解决方案 在ElementUI表格组件中,当希望自定义勾选框的样式或添加占位符时,可以通过多种方式来实现这一需求。一种常见的方式是对`el-table-column`中的属性进行调整,并利用插槽(slot)来自定义列的内容。 对于想要设置勾选框占位符的情况,可以考虑如下方案: #### 使用 `type="selection"` 列并覆盖默认模板 通过使用具名插槽(named slot),可以在`<template>`标签内重新定义选择列的行为和外观。这样不仅可以修改勾选框的位置,还可以为其周围添加额外的文字说明作为占位提示[^1]。 ```html <el-table :data="tableData"> <!-- 自定义 selection 列 --> <el-table-column type="selection" width="55"> <template slot-scope="scope"> <span v-if="!scope.row.selectable">无</span> <el-checkbox v-else></el-checkbox> </template> </el-table-column> ...其他列... </el-table> ``` 在这个例子中,如果某行的数据对象包含一个名为`selectable`的字段用于指示该条目是否可被选中,则可以根据此条件显示不同的内容;如果不满足特定逻辑则展示“无”,以此达到占位的目的。 另外,在某些场景下可能还需要进一步定制CSS类以确保视觉上的一致性和美观度。此时应该注意避免直接操作原生DOM结构,而是借助于Element Plus提供的API或者Vue.js本身的特性来进行更优雅的操作[^3]。 为了使未选状态下的单元格看起来更加友好,也可以尝试给整个单元格应用背景颜色或者其他形式上的变化,从而让用户更容易理解当前的状态。 #### 关联样式穿透与全局配置 针对一些特殊情况,比如需要统一管理所有页面内的此类风格,那么就可以采用样式穿透技术或是创建一套适用于项目的全局样式规则。这通常涉及到SCSS/SASS预处理器的应用以及合理运用`:deep()`伪类等手段去影响深层嵌套的选择器[^2]。 ```scss /* 示例 SCSS */ .el-table { .cell { &:not(.has-selection) { /* 假设我们为不可选项加了 has-selection 类 */ color: #ccc; font-style: italic; ::v-deep input[type=checkbox], ::v-deep span.checkbox__inner { display:none !important; // 隐藏实际控件 } &::before{ content:"--"; // 或者任何合适的字符/图标代替 } } } } ``` 上述代码片段展示了如何隐藏不必要的输入元素并通过纯文本替代品提供更好的用户体验。当然具体实现还需视项目实际情况而定。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值