动态复选框功能与表格搭配

最新推荐文章于 2023-09-20 14:50:58 发布

pinkanpurple

最新推荐文章于 2023-09-20 14:50:58 发布

阅读量277

点赞数

本文链接：https://blog.csdn.net/fkkkkkf/article/details/127472964

版权

Vue 动态复选框表格渲染 el-checkbox-group watch

关键词由CSDN通过智能技术生成

通过多选框组组件拿到选中的值在表格渲染的时候只渲染数组中的来达到动态复选框操作表格

selectDynamicColumn是初始选中的值这里我全给了（数组中有什么就选中什么）他只能含有

dynamicData 循环生成多选按钮

   <el-checkbox-group v-model="selectDynamicColumn">
                <!-- 当循环中有一项要操作是就先找到 -->
                   <el-checkbox  v-for="item in dynamicData" :label="item.label" :key="item.label" :disabled='item.label==="标题"'/>
               </el-checkbox-group>

import {dynamicData,selectDynamicColumn,tableColumns} from './dynamic/index'

prop是渲染表格的值

selectDynamicColumn是初始选中的数据里面只能有label不可以有prop

// // 动态复选框功能 
import { ref, watch } from 'vue'
const dynamicRaw = [
        { label: '排名', prop: 'rank' },
        { label: '标题', prop: 'title' },
        { label: '作者', prop: 'author' },
        { label: '日期', prop: 'date' },
        { label: '描述', prop: 'description' }
    ]
    // 复选框选项
export const dynamicData = ref(dynamicRaw)
    // 已选选项 (勾选上的往这里来放)
export const selectDynamicColumn = ref([])
const initSelectDynamicColumn = () => {
    selectDynamicColumn.value = dynamicData.value.map(item => item.label)
}
initSelectDynamicColumn()
    // 这里不能在使用selectDynamicColumn用于table-colcumn 这个就是监听的你不能改
    // 处理表格列数据 

export const tableColumns = ref([])
    // 让selectDynamicColumn做变化的那个数组
watch(selectDynamicColumn, (newvalue) => {
    tableColumns.value = []
        // 为什么不拿到newvalue直接赋值 因为newvalue是个对象我们要将他转成数组 并且带上prop
        // 将存在newvalue中的label和dynamicData比较
    const selectdata = dynamicData.value.filter(item => newvalue.includes(item.label))
        //     : Proxy {label: "排名", prop: "rank"}
        // 1: Proxy {label: "标题", prop: "title"}
        // 2: Proxy {label: "作者", prop: "author"}
        // 3: Proxy {label: "日期", prop: "date"}
        // 4: Proxy {label: "描述", prop: "description"}
    tableColumns.value.push(...selectdata)
}, {
    immediate: true
})

//             后端来的数据
<el-table :data='articleList' v-loading='loading' :max-height="tableHeight" border ref="tableRef">
      <el-table-column v-for="item in tableColumns" :key="item" :prop="item.prop" :label="item.label" >
        <template v-if="item.prop==='date'" #default="{row}">
          {{formatTime(row.date)}}
        </template>
      </el-table-column>
    </el-table>