Web与Vue表格功能中的问题

目录

特比鸣谢以下博主的优秀文章

二、静态页面的使用

1. 表格边框

2. 前端HTML页面交给后端生成PDF注意点

3. 静态页面实现打印功能

1) 页面

2) 页边距

三、 element Ui 表格中出现的问题

1. 滚动条问题

1) 纵向滚动条

四、表单的循环遍历

五、表单的多选和全选选项

六、display:grid布局（好用！

七、vue3 slot-scope无法使用

八、el-datepicker 报错 

九、el-table文本超出展示tooltip树形——show-overflow-tooltip

---

一、引用的文章

特比鸣谢以下博主的优秀文章

去除富文本框中标签

求富文本用js过滤部分标签但保留文本内容代码！-CSDN论坛

去除字符串空格问题

js去除字符串空格(空白符) - 一只看夕阳的猫 - 博客园

标签部分可关闭问题
element-ui中tabs页设置第一个页面不可关闭_weixin_34014277的博客-CSDN博客

打印问题参考

 html – 用于在CSS中打印的页边距 - 编程之家

容器display问题

flex布局，设置一行显示个数_leixu1027的博客-CSDN博客_displayflex一行只能放四个

element ui表格滚动条问题

Element 中表格固定列后横向滚动条无法拖动的问题解决_越陌度阡-CSDN博客_element表格横向滚动条失效

组件待入时出错

vue使用tinymce中提示Object(...) is not a function_我心坚持-CSDN博客

二、静态页面的使用

1. 表格边框

2. 前端HTML页面交给后端生成PDF注意点

给后端代码时，标签记得闭合，如<br /><img .../><hr />

3. 静态页面实现打印功能

1) 页面

@page{
     width:210mm;
     height:297mm;
}

2) 页边距

@page {
            margin-top: 0cm;
            margin-left: 1cm;
            margin-right: 1cm;
        }
@media print {
            body {
                margin-top: 0cm;
                margin-left: 1cm;
                margin-right: 1cm;
            }
}

ps：下面那一个听说是上面的方page不能满足火狐，所以添加了下面 @media

4. 想要实现下图效果时
 当遇到一行两个div的flex布局时 换行问题使用

.product-con{
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
}

ps:上方样式写在父容器中

三、 element Ui 表格中出现的问题

1. 滚动条问题

1) 纵向滚动条

当需要表格固定高度就有了纵向滚动条效果，需要在element table中添加一个固定高度

2) 横向滚动条

element table 横向滚动条 被固定栏覆盖问题

/deep/.el-table__fixed {
  height: auto !important;
  z-index: 1;
  bottom: 16px;
}

element表格 横向滚动条 高度问题

/deep/ .el-table__body-wrapper::-webkit-scrollbar {
  width: 15px; /* 滚动条的宽高 必须项 */
  height: 8px;
}

在使用前辈自己封装的tinymce遇到了报错

 根据上方参考地址，按照该博主的方式重新下载了低版本解决问题

四、表单的循环遍历

如果需要使用了一个表单的循环展示，或者多个循环的input并且绑定到一个变量中的情况

可以采取 表格 遍历

五、表格切换页面之后，勾选内容刷新

哇这真是无语了

主要的用法吧  比较简单 前提是：el-table \el-table-column type="selection"

1.在el-table标签中加入 :row-key="id"

2.在el-table-colum就多选框那一个加入:reserve-selectionn="true"

五、表单的多选和全选选项

设：想要下拉框第一项为全部班级，后面几项是别的选项，这是多选的下拉框

于是

<el-select
    v-model="tempScopeSchool"
    placeholder="请选择预约范围"
    multiple
    collapse-tags
    @change="handleMultiChange"
 >
    <el-option
        label="所有学校"
        value="ALL"
        @click.native="handleAllChange"
    ></el-option>
    <el-option
        v-for="(item, index) in list"
        :key="index"
        :label="item.label"
        :value="item.value"
    </el-option>
</el-select>

六、display:grid布局（好用！

//总容器
.container{
    display:grid;
    grid-template-rows:repeat(3,calc(100/3));
    grid-template-columnns:repeat(3,calc(100/3));
    grid-templalte-areas:"index1 index1 index2"
                         "index1 index1 index3"
                         "index4 index5 index6"
}
.index1{
    grid-area:index1;
}
.index2{
    grid-area:index2;
}
.......

七、vue3 slot-scope无法使用

参考：vue3的slot插槽用法，`slot-scope` are deprecated_浩星的博客-CSDN博客_`slot-scope` are deprecated.

修改为

<el-tree
    ...
>

    <template #default="{data}">
        <span>{data}</span>
    </tempalte>

</el-tree>

八、el-datepicker 报错 

升级 element-ui 2.15.7 后遇到 el-date-picker 警告问题 - 知了博客 - IT人的小站

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "placement"

九、el-table文本超出展示tooltip树形——show-overflow-tooltip