工作记录 -- el-table自定义表头与表头数据改变不重新不渲染问题(表头嵌套popover弹出框和cascader级联选择器)

布满荆棘的人生 2022-10-08 13:25 3阅读 0赞

#### 背景 ####

对表格的某一列增加筛选操作；el-table自带api貌似有点麻烦而且好像不太适合从服务端拿数据进行处理（我太菜不知道怎么操作~）

#### 解决方案 – 利用插槽 ####

注意的问题：

1.  没有加key的时候数据是没有渲染上
2.  表头不渲染问题： 配合着`v-if`和对该列增加key值来使用

代码：

<el-table>
    	...
    	<el-table-column
            show-overflow-tooltip
            min-width="120" 
            :key="Math.random()" 
        >
        
            <template #header>
                缺陷分类
                <el-popover @show="getRules" @hide="getList">
                    <el-cascader
                        :options="cascaderOptions"
                        :props="cascaderProps"
                        ref="cascader"
                        v-model="selectedValue"
                        show-overflow-tooltip
                        class="cascader-input"
                        popper-class="cascader"
                        size="small"
                        placeholder="请选择问题分类"
                        collapse-tags
                        clearable
                        @change="selectedChange"
                    >
                        <template slot-scope="{ node, data }">
                            <span :title="data.label">{
       { data.label }}</span>
                        </template>
                        <input />
                    </el-cascader>
                    
                    <i slot="reference" class="el-icon-arrow-down el-icon--right add-cursor"></i>
                </el-popover>
            </template>
            <template slot-scope="scope">
                <span>
                    {
       { scope.row.value || "--"}}
                </span>
            </template>
        </el-table-column>
        ...
    </el-table>

#### 效果 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzM1OTMx_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4NzM1OTMx_size_16_color_FFFFFF_t_70]: /images/20221005/e218551e7db14df7bc2a90b83852c1a1.png