elementui表格组件复选框实现单选功能

	// 子组件
	<template>
    <div>
        
        <el-table
            :data="data"
            ref="refsTable"
            highlight-selection-row
            @select="selectChange"
            @selection-change="handleSelectionChange"
            v-on="$listeners"
            style="width: 100%">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="date"
                label="日期"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        name:'Ztable',
        props: {
            data: {
                type: Array,
                default: ()=>[]
            },
            multiple:{ // 传入false表示这个单选
                type:Boolean,
                default:true
            }
            
        },
        data() {
            return {
                ishandler:false,
            }
        },
        methods: {
            selectChange(list,val){
                if(!this.multiple){
                    this.ishandler = true
                    let currentJSON = JSON.stringify(val)
                    let find = list.find(item=>{
                        let itemJSON = JSON.stringify(item)
                        return itemJSON === currentJSON
                    })
                    if(find){
                        this.$refs.refsTable.clearSelection();
                        this.$refs.refsTable.toggleRowSelection(find);
                    }
                    this.$emit('radioChange',find)
                }

            },
            handleSelectionChange(selection) {
                if(!this.multiple){
                	// 数据更新的时候去除掉勾选的数据
                    if(selection.length === 0 && !this.ishandler){
                        this.$emit('radioChange',undefined)
                    }
                    this.ishandler = false
                }
            },

        },
    }
</script>

<style scoped>
/**找到表头那一行，然后把里面的复选框隐藏掉**/
::v-deep .el-table__header-wrapper .el-table__header .el-checkbox {
 	 display: none;
}
</style>

// 父组件
<template>
  <div id="app">
 
    <el-button @click="setTableData">重新设置表格数据</el-button>
    <zTable :data="tableData" :multiple="false" @radioChange="handleSelectionChange" />
  </div>
</template>

<script>

import zTable from './components/Ztable.vue'
export default {
  name: 'App',
  data(){
    return {
        tableData:[],
        currentVal:undefined
    }
  },
  components: {
    zTable
  },
  
  mounted () {
    this.setTableData()
  },
  methods:{
    handleSelectionChange(selection) {
        console.log('选择的值',selection)
    },
    setTableData(){
      this.tableData = [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
      }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
      }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
      }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
      }]
    },
    
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>