1.处理页面表格错位问题 引入activated() 事件

小小儁爺

2024-09-05 86e5ff7028168bf18b5d3846022ebeac09aa4d4f

 src/views/template2.vue

@@ -1,332 +1,332 @@
<template>
  <div>
    <div class="body" :style="{height:mainHeight+'px'}">
      <div
        class="elTableDiv"
      >

        <div style="width: 300px;background:#fff">

          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">
            <div style="display: flex;">
              <div
                style="width: 5px;height: 100%;border-radius: 5px;"
                :style="{background:$store.state.settings.theme}"
              />
              <div style="margin-left: 8px;">组织名称</div>
            </div>

            <!--            <div style="margin-right:10px">-->
            <!--              <i class="el-icon-plus" style="cursor: pointer;color: #999" />-->
            <!--            </div>-->
            <!--            @click="rolePlusClick"-->
          </div>

          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: auto"
            :style="{height:(tableHeight-20)+'px'}"
            :data="treeLeft"
            node-key="code"
            highlight-current
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            draggable
            :allow-drop="treeLeftAllowDrop"
          >
            <!--            @node-click="treeLeftNodeClick"-->

            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span v-if="!data.isEdit">{{ data.name }}</span>
              <input
                v-if="data.isEdit"
                :ref="data.code"
                v-model="data.name"
                type="text"
                @click.stop
                @blur="treeSave(data)"
                @keyup.enter="treeSave(data)"
              >

              <span v-if="!data.isEdit">
                <i
                  class="el-icon-plus"
                  style="margin-right:10px;color: #999"
                  @click.stop="val=>treeAddClick(val,node,data)"
                />
                <i
                  v-if="data.code!=='000'"
                  class="el-icon-edit"
                  style="margin-right:10px;color: #999"
                  @click.stop="val=>treeEditClick(val,node,data)"
                />
                <i
                  v-if="data.code!=='000'"
                  class="el-icon-delete"
                  style="margin-right: 4px;color: #999"
                  @click.stop="val=>treeDeleteClick(val,node,data)"
                />
              </span>
            </span>
          </el-tree>
        </div>

        <div
          style="margin-left: 10px;width:100%;position: relative"
        >

          <el-table
            ref="tableDataRef"
            class="tableFixed"
            :data="tableData"
            :height="(tableHeight-40)+'px'"
            border
            row-class-name="custom-row"
            :style="{width: 100+'%',height:(tableHeight-40)+'px',marginBottom:'10px'}"
            highlight-current-row
            :header-cell-style="this.$headerCellStyle"
            :cell-style="this.$cellStyle"
            @sort-change="sortChange"
          >
            <!--            prop="RowNum"-->
            <el-table-column
              type="index"
              width="50"
              fixed
              label="序号"
            />
            <el-table-column
              prop="code"
              label="用户编码"
              sortable="custom"
            />
            <!--            <el-table-column-->
            <!--              label="操作"-->
            <!--              width="120"-->
            <!--              fixed="right"-->
            <!--            >-->
            <!--              <template slot-scope="{row}">-->
            <!--                <div class="operationClass">-->
            <!--                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">-->
            <!--                    <i class="el-icon-edit-outline" @click="edit('edit',row)" />-->
            <!--                  </el-tooltip>-->
            <!--                  <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->
            <!--                    <i class="el-icon-delete" @click="del(row)" />-->
            <!--                  </el-tooltip>-->
            <!--                </div>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
          </el-table>

          <!--分页-->
          <pagination
            :total="total"
            :page.sync="form.page"
            :limit.sync="form.rows"
            align="right"
            layout="total,prev, pager, next,sizes,jumper"
            popper-class="select_bottom"
            @pagination="getOrganizationSearch"
          />

        </div>

      </div>

    </div>

  </div>
</template>

<script>
import waves from '@/directive/waves'
import arrayToTree from 'array-to-tree'
import { throttle } from '@/utils/debounceAndThrottle'
import Pagination from '@/components/Pagination'

export default {
  name: 'RoleList',
  directives: { waves },
  components: {
    Pagination
  },
  data() {
    return {
      mainHeight: 0,
      tableHeight: 0,

      treeLeft: [
        {
          code: '000',
          name: '大岛电器',
          isEdit: false,
          children: [
            {
              code: '001',
              name: '研发部',
              isEdit: false,
              children: []
            }, {
              code: '002',
              name: '销售部',
              isEdit: false,
              children: []
            }, {
              code: '003',
              name: '生产部',
              isEdit: false,
              children: [
                {
                  code: '004',
                  name: '金工车间一',
                  isEdit: false,
                  children: []
                }, {
                  code: '005',
                  name: '金工车间二',
                  isEdit: false,
                  children: []
                }
              ]
            }
          ]
        }
      ], // 左侧树
      defaultPropsLeft: {
        children: 'children',
        label: 'name'
      },
      tableData: [
        { code: '001' },
        { code: '002' },
        { code: '003' }
      ],
      form: {
        page: 1,
        rows: 20
      },
      total: 0

    }
  },
  watch: {
    // treeLeft: {
    //   handler(newValue, oldValue) {
    //     newValue[0].roles.forEach(i => {
    //       if (i.isEdit) {
    //         this.$nextTick(() => {
    //           this.$refs[i.code].focus()
    //         })
    //       }
    //     })
    //   },
    //   deep: true
    // }
  },

  created() {

  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
    this.getHeight()
  },
  methods: {
    // 获取页面高度
    getHeight() {
      this.$nextTick(() => {
        this.mainHeight = window.innerHeight - 75
        this.tableHeight = this.mainHeight - 50
      })
    },
    // 左侧树形拖动处理
    treeLeftAllowDrop(draggingNode, dropNode, type) {
      // console.log(draggingNode, dropNode, type)
      // 注掉的是同级拖拽
      if (draggingNode.level === dropNode.level) {
        return type === 'prev' || type === 'next'
      } else {
        // 不同级进行处理
        return false
      }
    },
    getTreeAttr(val) {
      console.log(val, 1)
      if (val['children']) {
        val['children'].push({
          code: '',
          name: '',
          isEdit: true,
          children: []
        })
      } else {
        val.children.push(
          { code: '', name: '', isEdit: true }
        )
      }
      this.$nextTick(() => {
        this.$refs[''].focus()
      })
    },
    // 角色名称保存   采用防抖形式
    treeSave: throttle(function(val) {
      val.isEdit = false

      console.log('执行了！')
    }, 1000, true),

    treeEditClick(val, node, data) {
      data.isEdit = true
      this.$nextTick(() => {
        this.$refs[data.code].focus()
      })
    },
    treeDeleteClick(val, node, data) {

    },
    treeAddClick(val, node, data) {
      // console.log(val, node, data, 2)

      // this.treeLeft = data.children.push({ code: '', name: '', isEdit: true })
      this.getTreeAttr(data)

      // console.log(this.treeLeft, 3)
    },
    sortChange({ column, prop, order }) {
      if (order === 'descending') {
        order = 'desc'
      } else if (order === 'ascending') {
        order = 'asc'
      } else {
        order = 'desc'
      }
      this.form.order = order
      this.form.prop = prop
      // this.getOrganizationSearch()
    },
    getOrganizationSearch() {

    }
  }
}
</script>

<style scoped lang="scss">
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}

//::v-deep .el-checkbox__label {
//  width: 55px;
//}
//
.el-icon-plus:hover, .el-icon-edit:hover, .el-icon-delete:hover {
  color: #000 !important;
}
</style>
<template>

  <div>

    <div class="body" :style="{height:mainHeight+'px'}">

      <div

        class="elTableDiv"

      >



        <div style="width: 300px;background:#fff">



          <div style="margin: 20px 10px 0 10px;display: flex;justify-content: space-between;">

            <div style="display: flex;">

              <div

                style="width: 5px;height: 100%;border-radius: 5px;"

                :style="{background:$store.state.settings.theme}"

              />

              <div style="margin-left: 8px;">组织名称</div>

            </div>



            <!--            <div style="margin-right:10px">-->

            <!--              <i class="el-icon-plus" style="cursor: pointer;color: #999" />-->

            <!--            </div>-->

            <!--            @click="rolePlusClick"-->

          </div>



          <el-tree

            ref="treeLeftRef"

            style="padding: 10px;overflow: auto"

            :style="{height:(tableHeight-20)+'px'}"

            :data="treeLeft"

            node-key="code"

            highlight-current

            :props="defaultPropsLeft"

            :default-expand-all="true"

            :expand-on-click-node="false"

            draggable

            :allow-drop="treeLeftAllowDrop"

          >

            <!--            @node-click="treeLeftNodeClick"-->



            <span slot-scope="{ node, data }" class="custom-tree-node">

              <span v-if="!data.isEdit">{{ data.name }}</span>

              <input

                v-if="data.isEdit"

                :ref="data.code"

                v-model="data.name"

                type="text"

                @click.stop

                @blur="treeSave(data)"

                @keyup.enter="treeSave(data)"

              >



              <span v-if="!data.isEdit">

                <i

                  class="el-icon-plus"

                  style="margin-right:10px;color: #999"

                  @click.stop="val=>treeAddClick(val,node,data)"

                />

                <i

                  v-if="data.code!=='000'"

                  class="el-icon-edit"

                  style="margin-right:10px;color: #999"

                  @click.stop="val=>treeEditClick(val,node,data)"

                />

                <i

                  v-if="data.code!=='000'"

                  class="el-icon-delete"

                  style="margin-right: 4px;color: #999"

                  @click.stop="val=>treeDeleteClick(val,node,data)"

                />

              </span>

            </span>

          </el-tree>

        </div>



        <div

          style="margin-left: 10px;width:100%;position: relative"

        >



          <el-table

            ref="tableDataRef"

            class="tableFixed"

            :data="tableData"

            :height="(tableHeight-40)+'px'"

            border

            row-class-name="custom-row"

            :style="{width: 100+'%',height:(tableHeight-40)+'px',marginBottom:'10px'}"

            highlight-current-row

            :header-cell-style="this.$headerCellStyle"

            :cell-style="this.$cellStyle"

            @sort-change="sortChange"

          >

            <!--            prop="RowNum"-->

            <el-table-column

              type="index"

              width="50"

              fixed

              label="序号"

            />

            <el-table-column

              prop="code"

              label="用户编码"

              sortable="custom"

            />

            <!--            <el-table-column-->

            <!--              label="操作"-->

            <!--              width="120"-->

            <!--              fixed="right"-->

            <!--            >-->

            <!--              <template slot-scope="{row}">-->

            <!--                <div class="operationClass">-->

            <!--                  <el-tooltip class="item" effect="dark" content="编辑" placement="top">-->

            <!--                    <i class="el-icon-edit-outline" @click="edit('edit',row)" />-->

            <!--                  </el-tooltip>-->

            <!--                  <el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">-->

            <!--                    <i class="el-icon-delete" @click="del(row)" />-->

            <!--                  </el-tooltip>-->

            <!--                </div>-->

            <!--              </template>-->

            <!--            </el-table-column>-->

          </el-table>



          <!--分页-->

          <pagination

            :total="total"

            :page.sync="form.page"

            :limit.sync="form.rows"

            align="right"

            layout="total,prev, pager, next,sizes,jumper"

            popper-class="select_bottom"

            @pagination="getOrganizationSearch"

          />



        </div>



      </div>



    </div>



  </div>

</template>



<script>

import waves from '@/directive/waves'

import arrayToTree from 'array-to-tree'

import { throttle } from '@/utils/debounceAndThrottle'

import Pagination from '@/components/Pagination'



export default {

  name: 'RoleList',

  directives: { waves },

  components: {

    Pagination

  },

  data() {

    return {

      mainHeight: 0,

      tableHeight: 0,



      treeLeft: [

        {

          code: '000',

          name: '大岛电器',

          isEdit: false,

          children: [

            {

              code: '001',

              name: '研发部',

              isEdit: false,

              children: []

            }, {

              code: '002',

              name: '销售部',

              isEdit: false,

              children: []

            }, {

              code: '003',

              name: '生产部',

              isEdit: false,

              children: [

                {

                  code: '004',

                  name: '金工车间一',

                  isEdit: false,

                  children: []

                }, {

                  code: '005',

                  name: '金工车间二',

                  isEdit: false,

                  children: []

                }

              ]

            }

          ]

        }

      ], // 左侧树

      defaultPropsLeft: {

        children: 'children',

        label: 'name'

      },

      tableData: [

        { code: '001' },

        { code: '002' },

        { code: '003' }

      ],

      form: {

        page: 1,

        rows: 20

      },

      total: 0



    }

  },

  watch: {

    // treeLeft: {

    //   handler(newValue, oldValue) {

    //     newValue[0].roles.forEach(i => {

    //       if (i.isEdit) {

    //         this.$nextTick(() => {

    //           this.$refs[i.code].focus()

    //         })

    //       }

    //     })

    //   },

    //   deep: true

    // }

  },



  activated() {
  window.addEventListener('resize', this.getHeight)
  this.getHeight()
},
created() {



  },

  mounted() {

    window.addEventListener('resize', this.getHeight)

    this.getHeight()

  },

  methods: {

    // 获取页面高度

    getHeight() {

      this.$nextTick(() => {

        this.mainHeight = window.innerHeight - 75

        this.tableHeight = this.mainHeight - 50

      })

    },

    // 左侧树形拖动处理

    treeLeftAllowDrop(draggingNode, dropNode, type) {

      // console.log(draggingNode, dropNode, type)

      // 注掉的是同级拖拽

      if (draggingNode.level === dropNode.level) {

        return type === 'prev' || type === 'next'

      } else {

        // 不同级进行处理

        return false

      }

    },

    getTreeAttr(val) {

      console.log(val, 1)

      if (val['children']) {

        val['children'].push({

          code: '',

          name: '',

          isEdit: true,

          children: []

        })

      } else {

        val.children.push(

          { code: '', name: '', isEdit: true }

        )

      }

      this.$nextTick(() => {

        this.$refs[''].focus()

      })

    },

    // 角色名称保存   采用防抖形式

    treeSave: throttle(function(val) {

      val.isEdit = false



      console.log('执行了！')

    }, 1000, true),



    treeEditClick(val, node, data) {

      data.isEdit = true

      this.$nextTick(() => {

        this.$refs[data.code].focus()

      })

    },

    treeDeleteClick(val, node, data) {



    },

    treeAddClick(val, node, data) {

      // console.log(val, node, data, 2)



      // this.treeLeft = data.children.push({ code: '', name: '', isEdit: true })

      this.getTreeAttr(data)



      // console.log(this.treeLeft, 3)

    },

    sortChange({ column, prop, order }) {

      if (order === 'descending') {

        order = 'desc'

      } else if (order === 'ascending') {

        order = 'asc'

      } else {

        order = 'desc'

      }

      this.form.order = order

      this.form.prop = prop

      // this.getOrganizationSearch()

    },

    getOrganizationSearch() {



    }

  }

}

</script>



<style scoped lang="scss">

.custom-tree-node {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: space-between;

  font-size: 14px;

  padding-right: 8px;

}



//::v-deep .el-checkbox__label {

//  width: 55px;

//}

//

.el-icon-plus:hover, .el-icon-edit:hover, .el-icon-delete:hover {

  color: #000 !important;

}

</style>