vue3侧边栏控制表格列的显示和隐藏

效果图

写法思路

1.先在表格的每一列上写控制这一列的显示和隐藏得属性v-if 

2.控制这一列的显示隐藏写成数组,可以方便之后操作

3.通过开关的 的属性 0和1 来控制每一列 0 显示  1不显示 又因为开关switch的点击事件可以获取到表格的而每一行数据,通过点击事件去触发另一个表格的每一列的显示和隐藏

 <el-table :data="stateinfo.tableData" style="width: 100%">
    <el-table-column v-if="stateinfo.datalis[0].Statuslis" :key="0" prop="yonghubianhao" label="用户编号" width="200"/>
    <el-table-column v-if="stateinfo.datalis[1].Statuslis" :key="1" prop="yonghuming" label="用户名称" width="200"/>
    <el-table-column v-if="stateinfo.datalis[2].Statuslis" :key="2" prop="shouji" label="手机号" width="200"/>
    <el-table-column v-if="stateinfo.datalis[3].Statuslis" :key="3" prop="youxiang" label="邮箱" width="200"/>
    <el-table-column v-if="stateinfo.datalis[4].Statuslis" :key="4" prop="bumen" label="部门" width="200"/>
    <el-table-column v-if="stateinfo.datalis[5].Statuslis" :key="5" prop="Status" label="状态" width="200"/>

// 控制列设置按钮
  <el-button @click="stateinfo.isdrawer = true">列设置</el-button>

// 侧边栏内容用表格呈现
  <el-drawer v-model="stateinfo.isdrawer" title="列设置">
    <el-table
      height="55vh"
      :data="stateinfo.UserDatace"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ 'text-align': 'center' }"
      style="width: 100%; margin-top: 5px"
    >
      <el-table-column prop="label" label="列名" width="200" />
      <el-table-column prop="Status" label="显示" width="200">
        <template #default="scope">
          <el-switch
            v-model="scope.row.Status"
            :active-value="0"
            :inactive-value="1"
            @change="chengeswitch(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-drawer>


ts代码

<script setup>
import {reactive} from 'vue'
//定义控制每一列的显示数组
const stateinfo = reactive({
//表格数据
tableData: [
        {
          yonghubianhao:'2222',
          yonghuming: "张三",
          shouji: "12345678909",
          youxiang:"123@123.com",
          bumen:'快乐部',
          Status:'123',
        },
        {
          yonghubianhao:'2222',
          yonghuming: "张三",
          shouji: "12345678909",
          youxiang:"123@123.com",
          bumen:'快乐部',
          Status:'123',
        },
        {
          yonghubianhao:'2222',
          yonghuming: "张三",
          shouji: "12345678909",
          youxiang:"123@123.com",
          bumen:'快乐部',
          Status:'123',
        },
      ],
//侧边栏显示和隐藏
      isdrawer: false,
//表格每一列都添加一个可以控制的字段
      datalis: [
        {
          prop: "yonghubianhao",
          label: "用户编号",
          Statuslis: true
        },
        {
          prop: "yonghuming",
          label: "用户名称",
          Statuslis: true
        },
        {
          prop: "shouji",
          label: "手机号",
          Statuslis: true
        },
        {
          prop: "youxiang",
          label: "邮箱",
          Statuslis: true
        },
        {
          prop: "bumen",
          label: "部门",
          Statuslis: true
        },
        {
          prop: "Status",
          label: "锁定状态",
          Statuslis: true
        },

      ],
//侧边栏里表格的数据包括开关switch控制的数据
      UserDatace: [
        {
          label: "用户编号",
          Status: 0,
        },
        {
          label: "用户名称",
          Status: 0,
        },
        {
          label: "手机号",
          Status: 0,
        },
        {
          label: "邮箱",
          Status: 0,
        },
        {
          label: "部门",
          Status: 0,
        },
        {
          label: "锁定状态",
          Status: 0,
        },
      ],
})
function chengeswitch(row) {
      if (row.Status == 1){
     stateinfo.datalis.forEach((item)=>{
        if (item.label == row.label) {                                                        
          item.Statuslis = false
        }
      })
      }else{
         stateinfo.datalis.forEach((item)=>{
        if (item.label == row.label) {                                                        
          item.Statuslis = true
        }
      })
      }
   
    },

</script>