这里做下平时用到组件时 产生的问题记录
①.关于ElementUI导航组件el-menu刷新页面后恢复默认问题
③.vue router带参数页面刷新或回退参数消失的解决方法
①.关于ElementUI导航组件el-menu刷新页面后恢复默认问题
<el-menu
:default-active="activeIndex"
router //是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
>
// index值设置为路由path
<el-menu-item index="/">首页</el-menu-item>
<el-menu-item index="/mine">我的</el-menu-item>
</el-menu>
...
data () {
return {
activeIndex: this.$route.path
}
},
②.element table表格行列拖拽
element ui 表格没有自带的拖拽排序的功能，只能借助第三方插件Sortablejs来实现
首先需要安装Sortable.js
npm install sortablejs --save
然后引用
import Sortable from ‘sortablejs’
需要注意的是element table务必指定row-key，row-key必须是唯一的，如ID，不然会出现排序不对的情况。
示例代码:
<template>
<div style="width:800px">
<el-table :data="tableData"
border
row-key="id"
align="left">
<el-table-column v-for="(item, index) in col"
:key="`col_${index}`"
:prop="dropCol[index].prop"
:label="item.label">
</el-table-column>
</el-table>
<pre style="text-align: left">
{
{
dropCol}}
</pre>
<hr>
<pre style="text-align: left">
{
{
tableData}}
</pre>
</div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
data() {
return {
col: [
{
label: '日期',
prop: 'date'
},
{
label: '姓名',
prop: 'name'
},
{
label: '地址',
prop: 'address'
}
],
dropCol: [
{
label: '日期',
prop: 'date'
},
{
label: '姓名',
prop: 'name'
},
{
label: '地址',
prop: 'address'
}
],
tableData: [
{
id: '1',
date: '2016-05-02',
name: '王小虎1',
address: '上海市普陀区金沙江路 100 弄'
},
{
id: '2',
date: '2016-05-04',
name: '王小虎2',
address: '上海市普陀区金沙江路 200 弄'
},
{
id: '3',
date: '2016-05-01',
name: '王小虎3',
address: '上海市普陀区金沙江路 300 弄'
},
{
id: '4',
date: '2016-05-03',
name: '王小虎4',
address: '上海市普陀区金沙江路 400 弄'
}
]
}
},
mounted() {
this.rowDrop()
this.columnDrop()
},
methods: {
//行拖拽
rowDrop() {
const tbody = document.querySelector('.el-table__body-wrapper tbody')
const _this = this
Sortable.create(tbody, {
onEnd({
newIndex, oldIndex }) {
const currRow = _this.tableData.splice(oldIndex, 1)[0]
_this.tableData.splice(newIndex, 0, currRow)
}
})
},
//列拖拽
columnDrop() {
const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
const oldItem = this.dropCol[evt.oldIndex]
this.dropCol.splice(evt.oldIndex, 1)
this.dropCol.splice(evt.newIndex, 0, oldItem)
}
})
}
}
}
</script>
<style scoped>
</style>
③.vue router带参数页面刷新或回退参数消失的解决方法
先说下：Vue router 如何传参
params、query是什么？
params：/router1/:id ，
/router1/123，/router1/789 ,这里的id叫做params
query /router1?id=123 ,/router1?id=456 ,这里的id叫做query。
路由界面：
router.js:
注意：如果路由上面不写参数，也是可以传过去的，但不会在url上面显示出你的参数，并且当你跳到别的页面或者刷新页面的时候参数会丢失（如下图所示），那依赖这个参数的http请求或者其他操作就会失败。
注意看上面的路由参数，id这个参数是我们有设置在路由上面的，id2我没有设置在路由里面，所以刷新之后id2就不见了，在项目中，我们总不可能要求用户不能刷新吧。
总结：
params、query不设置也可以传参，但是params不设置的时候，刷新页面或者返回参数会丢失，query并不会出现这种情况
④.vue如何根据返回的值对元素进行样式渲染
- 最终显示样式：
- 代码实现：
在中需要显示的内容前面，添加图标元素，并添加对应的class样式。
其中，addclassStatus以及addclassPriority两个方法是自己定义的计算，根据属性值计算class样式的方法
- 在vue中的 export default 中的methods中进addclassStatus以及addclassPriority方法的计算和赋值
- 在css文件中定义css样式
⑤.vue封装公共方法，并调用
首先，在assets文件夹下，新建js文件夹，创建common.js
export default {
text(){
console.log("测试，测试！！！")
}
}
全局（多页面）使用：
在main.js中引入
/* 引入公共js*/
import common from '@/assets/js/common.js'
Vue.prototype.common=common;
在vue组件中使用
this.common.text(); //测试，测试！！！
单页面使用：
在vue的script中引入
import common from '@/assets/js/common.js'
在vue组件中使用
common.text(); //测试，测试！！！
另：static文件夹一般用来存放外部资源；assets文件夹一般存放自身资源
⑥.vue数据表格自定义序号排序（每页连续排序）
思路： 获取到数据，使用forEach为每一项动态添加index属性。
页面：
data：
methods：
⑦.element-ui 的table中让某个单元格变色
<el-table :cell-style="yellowBg"></el-table>
methods中：
// 未指派时，背景变黄
rowIndex是第几行，columnIndex是第几列
yellowBg ({
row, column, rowIndex, columnIndex}) {
if (row.statusName === '未指派' && columnIndex === 2) {
return {
background: '#eceb3c'
}
}
},
⑧.vue+element-ui 表格中的时间格式化
在后台的管理页面中，用户信息需要增加创建时间，后台传过来的时间戳 （1491559642000）这样的格式，在表格中显示正常的 YYYY-MM-DD HH:mm:ss
下载moment.js
npm install moment --save
<el-table-column
prop="createTime"
:formatter="dateFormat"
label="创建时间">
</el-table-column>
用 ‘:formatter’ 来绑定 设置时间格式的方法 dateForma
在methods 中定义 dateForma
引入moment.js
import moment from 'moment'
methods:{
dateForma:function(row,column){
var date = row[column.property];
if(date == undefined){
return ''};
return moment(date).format("YYYY-MM-DD HH:mm:ss")
}
}
⑨.Element表格单元格的几种点事件
1.cell-click 单元格触发事件
<template>
<el-table :data="tableData" style="width: 100%" @cell-click="goclick">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
</el-table-column>
</el-table>
</template>
methods: {
goclick(row,column,event,cell) {
console.log(row,column,event,cell)
}
}
2.普通click点击事件
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180">
</el-table-column>
<el-table-column prop="name" label="姓名" width="180">
</el-table-column>
<el-table-column prop="address" label="地址">
<template slot-scope="scope">
<div @click='goclick(scope.row.address)'>{
{
scope.row.address}}</div>
</template>
</el-table-column>
</el-table>
</template>
methods: {
goclick(address) {
console.log(address)
}
}