elementui动态设置el-table表头并记住选择

原创

已于 2022-06-08 16:24:08 修改 · 3.1k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #el-table

于 2022-05-31 19:30:08 首次发布

本文介绍了一个使用Element UI的表格组件实现动态列显示的示例，包括表格的多选功能、列的动态隐藏和显示，以及时间格式的特殊处理。通过监听`selection-change`事件处理选中项，并使用`localStorage`存储用户自定义的列设置。

HTML部分

el-table ref="table" :data="productList" style="width: 100%;" highlight-current-row
                @selection-change="handleSelectionChange">
            <el-table-column type="selection" fixed="left"></el-table-column>
            <el-table-column v-for="(item,index) in defaultColumns" :key="index"
                            show-overflow-tooltip
                            :prop="item.prop" :label="item.label" :width="item.width"
                            :min-width="item.minWidth? item.minWidth : '120'"
                            v-if="item.isChecked===true">
                <!---如果没有需要特殊处理的字段 就不必添加scope--->
                <template slot-scope="scope">
                    <div v-if="item.type === 'text'">
                    <!---显示对应的字段值--->
                        {
  
  { scope.row[item.prop]}}
                    </div>
                    <div v-if="item.type === 'date'">
                    <!---需要特殊处理的字段--->
                        {
  
  { scope.row.createTime}}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="220">
                <template slot-scope="scope">