VUE 问题记录

zhchyun2008

已于 2023-12-26 13:47:32 修改

阅读量482

点赞数 1

分类专栏： vue 文章标签： vue.js elementui javascript

于 2020-04-13 11:14:37 首次发布

本文链接：https://blog.csdn.net/zhchyun2008/article/details/105484434

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

el-dialog点击空白处取消关闭

el-input placeholder 显示双引号""

el-dialog点击空白处取消关闭

el-dialog中加入:close-on-click-modal="false"可以让点击空白不取消

el-input placeholder 显示双引号""

<el-input type="textarea" :rows="2" placeholder="请输入内容:{"参数名称":"参数值"}" v-model="dataSourceParam"></el-input>

caefd511-7ae6-3a26-889a-1c741607510e.jpg (436×454)

可拖动的窗口

1.vue-drag-resize vue-drag-resize 全解，vue拖拽缩放组件-CSDN博客

2. vue-draggable-resizable GitHub - gorkys/vue-draggable-resizable-gorkys: Vue 用于可调整大小和可拖动元素的组件并支持冲突检测、元素吸附、元素对齐、辅助线

3. 自定义拖动方法 directives 参考https://www.cnblogs.com/toyNotes/articles/12054188.html

最后使用2；因为1拖动完成后不会自己去激活状态，在有iframe的页面上不能继续操作窗口内的组件；

添加元素删除元素

参考资料地址：Vue 添加删除对象中的属性_vue form表单新增属性,去除属性-CSDN博客

https://www.cnblogs.com/gwkzb/p/12762435.html

//添加元素
this.$set(对象, '属性名',属性值)
 
//删除
1  delete this.form.a;//js方法  仅在2.2.0+版本中支持
2  import Vue from 'vue'
  //Vue.delete(this.form,'a');//vue方法
3  this.$delete(this.form,'a');

列表中获取某个对象

mailTemplateChange(e:any){
            console.log("mailTemplateChange e:{}",e)
            let mailTemplate:any = {}
            mailTemplate = this.mailTemplateList.find(item =>
            {
                // @ts-ignore
                return item.templateId == e
            })           
            this.mailTemplateDialogInfo.sendSubject = mailTemplate.sendSubject
            this.$delete(mailTemplate,'sendContent')
            console.log("mailTemplateChange mailTemplate:{} ",mailTemplate)
            this.mailTemplateDialogInfo.sendContent = mailTemplate.sendContent
        }

按钮权限

1 前端开发按钮组件 buttonPermissions.ts

import Vue from 'vue'

Vue.directive('buttonPermissions', {    
    bind: (el,data) => {
        if (process.env.NODE_ENV !== 'development') {
            // 路径地址 pro/xx/xx/xxx
            let pNList = location.pathname.slice(1).split('/')
            if (pNList.length > 3) {
                pNList.splice(0,3)
            }
            let pNStr = pNList.length > 0 ? pNList.join('/'): ''
          
            let name = pNStr + '/' +data.value
            // console.log("buttonPermissions name:{}",name)
            if (!window.buttonPermissionList.includes(name)) {
                el.style.display = 'none'
            }
        }
    }
})

2 main.ts中初始化 window.buttonPermissionList = 4步骤写的后端接口返回数据

3 前端引用按钮权限组件

4 后端查询按钮列表["showdialog",""]

el-table render 显示图片

<PageableTable
        ref="stPageableTable"
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight-100"
        border
        class="fixed-table-table"
        :multiple-selected="false"
        @page-change="onPageChange"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column v-for="column in insideColumns" :key="column.key" :width="column.width" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
          <template slot-scope="{row}">
            <div slot="empty">
              <el-upload
                :action="uploadUrl"
                :headers="uploadHeaders"
                :show-file-list="false"
                :on-success="handle3DSuccess"
                size="mini"
              >
                <i class="el-icon-upload" />上传
              </el-upload>
            </div>
            <el-button v-if="row.username !== 'admin'" title="删除" type="text" size="mini" icon="el-icon-delete" @click="remove(row.id)" />
          </template>
        </el-table-column>
      </PageableTable>

主要是

insideColumns: [
        { title: '缩略图名称', key: 'thumbnailName', sortable: 'true' },
        { title: '缩略图路径', key: 'thumbnailPath', sortable: 'true' },
        { title: '缩略图路径', key: 'thumbnailPath1', render: (h, params, row) => {
          return (
            <div>
              <el-image src={this.fileUrl(params.row.thumbnailPath)} style='width:36px;height:36px;'/>
            </div>
          )
        } }
      ],

render