vue小结

VUE的table·长字段隐藏

// 超出部分隐藏

<el-table-column prop="name" label="企业名称" show-overflow-tooltip/>

 

v-if和v-show

v-if是根据表达式的值来决定是否渲染元素

v-show是根据表达式的值来切换元素的display css属性

 

vue页面模块定位跳转

document.getElementById('countTable').scrollIntoView()

 

表格格式化时间

<el-table-column label="提交时间" align="center">
  <template slot-scope="scope">
    <span v-if="scope.row.applytime.length > 2">{{ scope.row.applytime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
    <span v-else>-</span>
  </template>
</el-table-column>

VUE的table · 动态表头和身体

html的内容
<el-table
  v-loading="loadingTabMonth"
  v-if="monthDataShow"
  :data="tableData"
  header-cell-class-name="header-cell"
  header-row-class-name="header-row"
  style="width: 100%">
  <el-table-column
    v-for="(index, head) in tableHead"
    :label="head"
    :prop="tableHead[head]"
    align= "center"
    show-overflow-tooltip>
  </el-table-column>
</el-table>

js内容


表头
this.tableHead = {}
for (var key in tableTitleJson) {
  if (this.$route.params.tableName === key) {
    this.tableHead = tableTitleJson[key]
  }
}
身体
showDataTableById(parms).then(response => {
  if (response.data.code === '200') {
      this.tableData = []
      var dataFrom = response.data.data
      this.tableData = dataFrom
  }
})


json串中数据
{
  "gy_cylb_info": {
    "id": "id",
    "公司名称": "comName",
    "产品类别": "cylb",
    "产业类别名称": "cylbMc"
  },
  "gy_fc_info": {
    "id": "id",
    "产品名称": "comName",
    "是否分成标识": "flag"
  }
}

　　

vue数据去重

var dataTime = ['1月', '2月', '1月', '1月' ]

dataTime = Array.from(new Set(dataTime))

 

结果： dataTime = ['1月', '2月']

 

vue对象塞值

var parms = { name: 'hh' }

this.$set(parms, j, this.picIdData[j])

 

//  做多选框  循环每个框加入checkIt 以便后期筛选选中的项

for (var i in this.serviceProList) {

  this.$set(this.serviceProList[i], 'checkIt', false)

} 

 

vue定时器

// 定时器离开当前页面会停止

// 定时器离开当前页面会停止
mounted() {
  this.thisOne = 1
  this.timer = setInterval(() => {
    this.thisOne += 1
    if (this.thisOne > 3) {
      this.thisOne = 1
    }
    this.timeChangeBusinessFun()
  }, 5000)
},
beforeDestroy() {
  clearInterval(this.timer)
},

　　

路由带参数跳转页面

goDetail(item) {
  var params = { creditCode: item.creditCode, comName: item.company }
  this.$router.push({ name: 'page', path: '/pagehPath/page', params })
}
this.$router.push({ name: 'page', path: '/pagehPath/page' })
取值
this.$route.params.key

注：

第一种方式

传递参数  -- this.$router.push({name: ' 路由的name ', params: {key: value}})

参数取值  -- this.$route.params.key

使用这种方式，参数不会拼接在路由后面，地址栏上看不到参数

第二种方式

传递参数  -- this.$router.push({path: ' 路由 ', query: {key: value}})

参数取值  -- this.$route.query.key

使用这种方式，传递参数会拼接在路由后面，出现在地址栏

由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效。需要用name来指定页面。

 第三种方式

//直接跳转 <router-view>、<el-breadcrumb-item>

<el-breadcrumb-item :to="{ path: '/pagehPath/page' }">企业填报</el-breadcrumb-item>