el-table表格表头添加复选框控制下面列表数据的显示与隐藏

89 阅读1分钟

<template>

  <el-table :data="tableData" style="width: 100%">
    <el-table-column  >
      <template #header>
        <el-checkbox v-model="checked1" label="提示异常"   size="large" />
      </template>
      <template #default="scope">
        {{ scope.row.name }}
        <el-button type="text">详情</el-button>
      </template>
    </el-table-column>
    
    <el-table-column label="年龄" prop="age" :show-header="false"></el-table-column>
    <el-table-column label="性别" prop="gender" :show-header="false"></el-table-column>

  </el-table>

</template>

<script>

export default {

  data() {

    return {
      tableData: [
  { name: '张三', age: 25, gender: '男', selected: false },
  { name: '李四', age: 30, gender: '女', selected: false },
  { name: '王五', age: 28, gender: '男', selected: false },
  { name: '赵六', age: 27, gender: '女', selected: false }
]

    };
  }

};

</script>