elementUI中el-table多选框样式的单选框

最新推荐文章于 2024-10-29 16:00:02 发布

原创最新推荐文章于 2024-10-29 16:00:02 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #elementui

本文介绍了如何修改Vue Element UI中的el-table组件，使其在单选模式下采用多选框样式，并展示了相关的代码实现和CSS调整。通过实例说明了如何在主js中注册组件并展示最终效果。

el-table中单选样式不太明显，所以改了个多选框样式的单选功能。

代码如下：

<template>
  <el-table
    ref="elTable"
    v-bind="$attrs"
    class="custom-table"
    :class="{'custom-table-radio': type == 'radio', 'is-row-click': isRowClick}"
    v-on="{...$listeners, 'selection-change': () => {}, 'row-click': ()=>{}}"
    @selection-change="handleSelectionChange"
    @row-click="setCurrent"
  >
    <el-table-column
      v-if="type == 'radio' || type == 'checkbox'"
      type="selection"
      column-key="index"
      width="50"
    />
    <slot />
  </el-table>
</template>
<script>
export default {
  name: 'CheckboxTable',
  props: {
    type: {
      type: String, // checkbox or radio
      default: 'none'
    },
    isRowClick: { // 是否点击一行勾选
      type: Boolean,
      default: true
    }
  },
  methods: {
    toggleRowExpansion(a, b) {
      this.$refs.elTable.toggleRowExpansion(a, b)
    },
    clearSelection() {
      this.$refs.elTable.clearSelection()
    },
    toggleRowSelection(data, selected) {
      this.$refs.elTable.toggleRowSelection(data, selected)
    },
    setCurrentRow(row) {
      this.$refs.elTable.setCurrentRow(row)
    },
    // setCurrent(row, event, column) {//2.4.11写法
    setCurrent(row, column, event) { // 2.8.2写法
      if (this.isRowClick) {
        if (this.type === 'radio' || this.type === 'checkbox') {
          this.$refs.elTable.toggleRowSelection(
            row
            // this.data[event.currentTarget.rowIndex]
          )
        }
      }
      this.$emit('row-click', row, event, column)
    },
    handleSelectionChange(selection) {
      if (this.type === 'radio' && selection.length > 1) {
        this.$refs.elTable.toggleRowSelection(selection[0])
        return
      }
      this.$emit('selection-change', selection)
    }
  }
}
</script>

 // element-ui.scss
.custom-table.is-row-click td.el-table-column--selection .cell::after {
  content: " ";
  cursor: pointer;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.custom-table-radio th.el-table-column--selection .el-checkbox {
  display: none;
}

main.js中注册

Vue.component('checkbox-table', () => import('@/components/CheckboxTable')) // checkbox-table

效果如下：

在这里插入图片描述