elementui修改源码方法，及配置、自定义格式化表格

墨蓝 2022-01-22 07:47 542阅读 0赞

[https://blog.csdn.net/weixin\_43864045/article/details/85098254][https_blog.csdn.net_weixin_43864045_article_details_85098254]

表格自动适应出现滚动条

<div class="right_table">
                            <nk-table
                                :showPage="false"
                                height="100%"
                                :page="page"
                                :data="treerightData"
                                :columns="treerightcolumns"
                                :rowselect="rowselect"
                                @rowselectChange="treerightselectChange"
                            ></nk-table>
                        </div>
    
    .right_table{
        width:100%;
        flex:1;height:100%;border:1px solid #ccc;    box-sizing: border-box;
    }
    .right_table div{height: 100% !important;}

二，tree默认选中和展开到指定节点

this.$refs.tree.setCurrentKey("6336547422568504856");
    this.$refs.tree.defaultExpandedKeys=["6336547422568504856"];

三、

//如果prop是warningStatus，则格式为红点，否则显示原来的值
    scope.row //返回当前行当值
    scope.$index //返回当前行下标
    scope.row[items.prop] //返回当前行值
    
    <el-table :data="tableData" border ref="eltable">
              <el-table-column
                v-for="(items, i) in exitCoumn"
                :key="i"
                :prop="items.prop"
                :label="items.label"
                :align="items.align"
              >
                <template #default="scope">
                  <div
                    v-if="items.prop === 'warningStatus'"
                    style="width: 10px; height: 10px; background: red"
                  ></div>
                  <div v-else>{
       { scope.row[items.prop] }}</div>
                </template>
              </el-table-column>
              <el-table-column label="操作" align="center">
                <el-button type="text" size="small" @click="dialogVisible = true"
                  >编辑</el-button
                >
              </el-table-column>
            </el-table>

[https_blog.csdn.net_weixin_43864045_article_details_85098254]: https://blog.csdn.net/weixin_43864045/article/details/85098254