el-popover弹框，树形结构控制动态表头

• 1.el-popover弹框
• • 1.1 可以通过自定义类修改弹出框样式，必须定义全局样式，通过不同的类区分开
• 2.给表单里面加入弹框，弹框里面添加树结构
• 3.树形弹框，全选反选
• 4.循环数组展示表头，并展示数据，数据过多用...代替
• • 4.1 第一种情况
  • 4.2 第二种情况
• 5.通过树形弹框控制表格表头展示
• 6.多选框控制表头
• 7.树形结构控制表头

1.el-popover弹框

placement="bottom-start" :弹框弹出位置
trigger="click" :弹出方式，通过点击弹出
popper-class="addformPanel" ：自定义el-popover 的类

slot="reference"//点击谁弹出弹框，就给谁加

表头样式
:header-cell-style="{text-align:center,background:#f3f7fe}"

 
            
              高级检索
            
            
              
                
                  
                    
                  
                
              
            

在 el-form 上面加上 label-width="130px"
就不用再 el-form-item 一个一个加了 label-width="130px"

form：{}

1.1 可以通过自定义类修改弹出框样式，必须定义全局样式，通过不同的类区分开

2.给表单里面加入弹框，弹框里面添加树结构

      
            
            
     


causeActionVisible：false
comCodeFormTreeData: [
{
          comName: "一级 1",
          id: 1000,
          children: [
            {
              id: 1001,
              comName: "二级 1-1",
              children: [
                {
                  id: 1002,
                  comName: "三级 1-1-1",
                },
              ],
            },
          ],
        },
        {
          comName: "一级 2",
          id: 2000,
          children: [
            {
              comName: "二级 2-1",
              id: 2001,
              children: [
                {
                  id: 2102,
                  comName: "三级 2-1-1",
                },
              ],
            },
            {
              comName: "二级 2-2",
              id: 2002,
              children: [
                {
                  id: 2101,
                  comName: "三级 2-2-1",
                },
              ],
            },
          ],
        }, 
],
      comCodeFormTreeDefaultProps: {
        children: "child",
        label: "comName",
      },

comCodehandleNodeClick(data) {
      // console.log("改变单位组织机构树", data);
      this.form.comCode = data.id;//赋值给form表单
      this.form.comName = data.comName;//赋值给form表单
      this.comNameVisible=false//选择树之后popover隐藏
    },

3.树形弹框，全选反选

node-key="id" 必须加这个
:default-expanded-keys="[0]" 默认取第0个

 
        
        
        


      parentList:[],
      defaultData: [],//树形结构全选，defaultData里面有defaultData1
      defaultData1: [//孩子
        {
          id: 1000,
          label: "案件基本信息",
          children: [
            { id: 1101, label: "案件编号", children: [] },
            { id: 1102, label: "案件名称", children: [] },
          ],
        },
        {
          id: 2,
          label: "涉案主体情况",
          children: [
            { id: 2101, label: "所属二级单位", children: [] },
            {
              id: 2102,
              label: "我方涉诉主体",
              children: [
                { id: 2201, label: "发案单位", children: [] },
                { id: 2202, label: "诉讼地位", children: [] },
              ],
            },
            {
              id: 2103,
              label: "对方涉诉主体",
              children: [
                { id: 2203, label: "对方名称", children: [] },
                { id: 2204, label: "对方主体性质", children: [] },
              ],
            },
            { id: 2104, label: "诉讼主体间关系", children: [] },
          ],
        },
        {
          id: 3,
          label: "案件审判阶段",
          children: [
            { id: 3101, label: "立案时间", children: [] },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },

  mounted() {
    this.defaultData = [//加个全选
      {
        label: "全选",
        id: 0, //默认展开用的
        children: this.defaultData1 || [],
      },
    ];
    this.$refs.tree.setCheckedKeys([0]);//默认第一个
}

//ref="tree"在树上面加ref
  getCheckedNode() {
      // let res = this.$refs.tree.getCheckedNodes();// 勾选的节点
      let res = this.$refs.tree.getCheckedNodes(false, true);// 获取勾选的所有关联节点（所有的半选节点也一并获取）
      let arr = [];
      res.forEach((item) => {
        arr.push(item.label);
      });
      this.parentList = arr;//选择的所有父子节点组成的数组
 }

4.循环数组展示表头，并展示数据，数据过多用…代替

4.1 第一种情况

tableData 表格数据
:show-overflow-tooltip="true" 数据过多，一行显示，多余用…代替

         
        
          
            
            // 
            
          
        


tableCol: [
        {
          prop: "basicCaseInformation",
          label: "案件基本信息",
          isshow: true,
          column: [
            { isshow: true, prop: "caseCode", label: "案件编号" },
            { isshow: true, prop: "caseName", label: "案件名称" },
          ],
        },
        {
          prop: "CaseInvolved",
          label: "涉案主体情况",
          isshow: true,
          column: [
            { isshow: true, prop: "comSecName", label: "所属二级单位" },
            {
              isshow: true,
              prop: "ourLitigant",
              label: "我方涉诉主体",
              columnchild: [
                { isshow: true, prop: "comName", label: "发案单位" },
                {
                  isshow: true,
                  prop: "ourLitigationStatus",
                  label: "诉讼地位",
                },
              ],
            },
            {
              isshow: true,
              prop: "otherLitigant",
              label: "对方涉诉主体",
              columnchild: [
                { isshow: true, prop: "otherSide", label: "对方名称" },
                {
                  isshow: true,
                  prop: "otherSideNature",
                  label: "对方主体性质",
                },
              ],
            },
            {
              isshow: true,
              prop: "isInsystemDispute",
              label: "诉讼主体间关系",
            },
          ],
        },
        {
          isshow: true,
          prop: "caseTrialStage",
          label: "案件审判阶段",
          column: [
            { isshow: true, prop: "registerDate", label: "立案时间" },
          ],
        },
      ],

4.2 第二种情况

          
            
          


tableData: [
        {
          comName: "今天",
          systemFileName: "集成指南.pdf",
        },
        {
          comName: "明天",
          systemFileName: "20210723(1).xlsx",
        },
      ],
tableHead: [
        {
          displayName: "单位名称",
          attrName: "comName",
        },
        {
          displayName: "制度文件名称",
          attrName: "systemFileName",
        },
      ],

5.通过树形弹框控制表格表头展示

注意： 表头和树形弹窗数据需要一致否则会有展示问题

 getCheckedNode() {
      // let res = this.$refs.tree.getCheckedNodes();// 勾选的节点
      // 获取勾选的所有关联节点（所有的半选节点也一并获取）
      let res = this.$refs.tree.getCheckedNodes(false, true);
      let arr = [];
      res.forEach((item) => {
        arr.push(item.label);
      });
      this.parentList = arr;
      // console.log("parentList", this.parentList);
      this.tableCol.forEach((item, index) => {//遍历第一层，isshow 展示不展示
        if (this.parentList.indexOf(item.label) > -1) {
          item.isshow = true;
        } else {
          item.isshow = false;
        }
        if (item.column) {
          item.column.forEach((itema, indexa) => {//遍历第二层，isshow 展示不展示
            if (this.parentList.indexOf(itema.label) > -1) {
              itema.isshow = true;
            } else {
              itema.isshow = false;
            }
            if (itema.columnchild) {
              itema.columnchild.forEach((itemc, indexc) => {//遍历第三层，isshow 展示不展示
                if (this.parentList.indexOf(itemc.label) > -1) {
                  itemc.isshow = true;
                } else {
                  itemc.isshow = false;
                }
              });
            }
          });
        }
      });
      this.$refs.tableData.doLayout()//页面重新布局，否则可能会失真el-table ref="tableData"
    },

export const getNowDay = (time) => {
  const date = new Date(time)
  const year = date.getFullYear()
  const month = getNumber(date.getMonth() + 1)
  const day = getNumber(date.getDate())
  return ${year}-${month}-${day}
}

6.多选框控制表头

7.树形结构控制表头