Vue前端-工作

:show-overflow-tooltip=“true” 限制列宽

固定table列长度，鼠标悬浮展示所有内容。

将show-overflow-tooltip="true"设置为全局配置:

//全局修改element默认配置
Element.TableColumn.props.showOverflowTooltip ={type:Boolean, default: true}

Vue js中for循环使用

1. item：定义的每一条的变量
   response.data.result：要循环的数组

for(let item of response.data.result) {
		用item操作每一条数据。
   }

2. response.data.result：要循环的数组
   index:索引

response.data.result.forEach((item, index) => {
			用item操作每一条数据。
}）

Vue element -ui el-table 合并行

/**在工具类util.js中定义通用方法
 *  table合并行通用 */

/**
 * 方法一
 *  table合并行通用(相邻) */
export function mergeTableRow1(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal]) {
        mList[rowVal]++
        data[index - (mList[rowVal] - 1)][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = 1
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}

/**
 * 方法二
 * 改良后（不相邻的数据相互不受影响）
 *  table合并行通用 */
export function mergeTableRow(data, merge) {
  if (!merge || merge.length === 0) {
    return data
  }
  merge.forEach((m) => {
    const mList = {}
    data = data.map((v, index) => {
      const rowVal = v[m]
      if (mList[rowVal] && mList[rowVal].newIndex === index) {
        mList[rowVal]['num']++
        mList[rowVal]['newIndex']++
        data[mList[rowVal]['index']][m + '-span'].rowspan++
        v[m + '-span'] = {
          rowspan: 0,
          colspan: 0
        }
      } else {
        mList[rowVal] = { num: 1, index: index, newIndex: index + 1 }
        v[m + '-span'] = {
          rowspan: 1,
          colspan: 1
        }
      }
      return v
    })
  })
  return data
}

<!-- show-summary 展示合计行 -->
<el-table v-loading="loading" :data="getOrderData(tableData)" show-summary :span-method='objectSpanMethod'>
      <el-table-column label="主键" align="center" prop="id" v-if="false"/>
      <el-table-column label="部门id" align="center" prop="deptId" v-if="false"/>
      <el-table-column label="部门名称" align="center" prop="deptName" width="100" />
      <el-table-column label="用户id" align="center" prop="userId" v-if="false"/>
      <el-table-column label="用户名" align="center" prop="userName" />
  </el-table>

import {mergeTableRow} from '@/utils/unit'

//methods:
	//合并行
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const span = column['property'] + '-span'
      if(row[span]){
        return row[span]
      }
    },
    //可以在加载页面时直接修改tableData的值，也可以调方法修改
    getOrderData(orderInfo){
      if (orderInfo == undefined || orderInfo == '' || orderInfo == null){
        return []
      }
      return  mergeTableRow(orderInfo, ['deptName', 'userName'])
    },

下拉框带搜索功能：filterable

<el-select v-model="deptForm.dept" filterable clearable value-key="id" placeholder="请选择" style="width: 185px;">
	  <el-option-group
		v-for="group in deptOptions"
		:key="group.label"
		:label="group.label">
		<el-option
		  v-for="item in group.options"
		  :key="item.id"
		  :label="item.name"
		  :value="item">
		</el-option>
	  </el-option-group>
    </el-select>

日期范围控件el-date-picker

去掉清空按钮

<style>
.el-picker-panel__footer .el-button--text.el-picker-panel__link-btn {
	display: none;
}
</style>

:clearable = “false” :去掉 ×

<el-date-picker
        v-model="queryParams.createTimeList"
        type="datetimerange"
        range-separator="至"
        size="small"
        :clearable = "false"	
        class="new-cascader"
        value-format="yyyy-MM-dd HH:mm:ss"
        start-placeholder="创建时间-始"
        end-placeholder="创建时间-终"
      />

设置默认时间

created() {
    this.getDefaultTime()
  //  this.getList()
  },
getDefaultTime(){
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      this.defaultTime.push(start)
      this.defaultTime.push(end)
      this.$set(this.queryParams,"createTimeList",this.defaultTime)
    },

el-cascader组件

elementUI级联选择器（Cascader）回显、取值问题

<el-cascader
                ref="cascader_add"
                :options="deptOptions"
                v-model="form.deptId"
                :props="{ checkStrictly: true,  value: 'deptId', label: 'deptName' }"
                @change="handleChangeAdd"
                clearable>
    </el-cascader>


	//获取选中节点
	this.$refs['cascader_add'].getCheckedNodes()
	//清空选中节点
	this.$refs.cascader_add.$refs.panel.clearCheckedNodes()

	//若带filterable属性且带@change触发事件，使用this.$nextTick方法取值
	//当数据被修改后使用this.$nextTick，会回调获取更新后的dom再渲染出来
	handleChange() {
      this.$nextTick(() => {
        const obj = this.$refs['cascader'].getCheckedNodes()
        if (obj[0] !== undefined) {
          this.queryParams.deptId = obj[0].data.deptId
          return
        }
        this.queryParams.deptId = undefined
      })
    },

vue 截取字符串

let str = 'abcdef';
// 0
str = str.slice(0);//返回整个字符串 abcdef
str = str.substring(0);//返回整个字符串 abcdef
str = str.substr(0);//返回整个字符串 abcdef
// 使用一个参数
str = str.slice(2);//截取第二个之后所有的字符 cdef
str = str.substring(2);//截取第二个之后所有的字符 cdef
str = str.substr(2);//截取第二个之后所有的字符 cdef
 
// 使用两个参数
str = str.slice(2,4);//截取第二个到第四个之间的字符 cd
str = str.substring(2,4);//截取第二个到第四个之间的字符 cd
str = str.substr(2,4);//截取从第3个开始往后数4位之间的字符 cdef
 
// 使用两个负数
str = str.slice(1,-3);//截取第二个到第四个之间的字符 bc
str = str.substring(1,-3);//截取第二个到第四个之间的字符 a #负数转换为0
str = str.substr(1,-3);//不能为负数，若强行传递负数，会被当成0处理 ' ' #负数转换为0
console.log(str)

表格默认选中

//this.chooseList 要被选中的数据
//multipleTable 表格名
//this.tableList 表格数据
if (this.chooseList) {
          this.$nextTick( ()=>{
            this.chooseList.forEach(info => {
              this.$refs.multipleTable.toggleRowSelection(this.tableList.find(item => info.id === item.id), true);
            })
          })
        }

类型转换

字符串转数组

以分号拆分字符串

str.split(';'); 

数组转字符串

把数组项拼接成字符串，并以分号隔开。默认情况下是以逗号隔开

arr.join(';');

vue数组对象去重

that.phoneList = that.unique(that.phoneList)

unique(arr) {
  const res = new Map();
  return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
},

vue合并两个数组（list）

this.list = this.list.concat(data.list)