vue + element table 组件 实现 动态展示表格列 + 实现拖拽 + 实现排序
效果图:实现效果:点击选择显示列,通过是否勾选 展示对应的每一列数据是否展示。代码:<div style="margin: 0; height: calc(100% - 140px)"><el-tableclass="znv-table":data="tableData"border:header-cell-style="rowHeaderClass..
·
效果图:
实现效果:点击选择显示列,通过是否勾选 展示对应的每一列数据是否展示。
第二张图可以拖拽改变顺序,第一张图级别 点击可以后端发请求排序,可以增加多个
代码:
<div style="margin: 0; height: calc(100% - 140px)">
<el-table
class="znv-table"
:data="tableData"
border
stripe
highlight-current-row
ref="table"
height="100%"
@header-dragend="headerDrag"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="50">
第一列默认展示的是选择框
</el-table-column>
<el-table-column v-for="column in showCol"
:key="column.key"
:prop="column.key"
:label="column.label"
resizable
:width="showCol.length < 10 ? '' : column.width"
align="center"
:show-overflow-tooltip="true">
<template slot="header" slot-scope="scope">
<span>{{column.label}}</span> 展示的是表头
展示的是 两个按钮 对应排序 动态class 展示的是 具体点击那个展示高亮,点击的显示高亮 其他的的不显示
<span class="caret-wrapper" :class="{ highlightAsc: column.highlight === 'asc', highlightDesc: column.highlight === 'desc' }" v-if="column.key === 'alarm_level_name'">
<i class="sort-caret ascending" @click="sortTableData('asc', 'alarm_level', column)"></i>
<i class="sort-caret descending" @click="sortTableData('desc', 'alarm_level', column)"></i>
</span>
<span class="caret-wrapper" :class="{ highlightAsc: column.highlight === 'asc', highlightDesc: column.highlight === 'desc' }" v-if="column.key === 'alarm_time'">
<i class="sort-caret ascending" @click="sortTableData('asc', 'alarm_time', column)"></i>
<i class="sort-caret descending" @click="sortTableData('desc', 'alarm_time', column)"></i>
</span>
</template>
展示的是 不同的内容 根据column的数据展示 (具体自己根据实际情况去改)
<template slot-scope="scope">
</template>
</el-table-column>
最后一列默认展示的是操作按钮 根据具体情况去写按钮 我这个是滑动之后 展示更多按钮
<el-table-column
fixed="right"
align="center"
label="操作"
width="107">
<template slot-scope="scope">
<el-dropdown placement="left"
@command="(val) => clickMenu(val, scope.row)"
@visible-change="(visible) => visibleChange(visible, scope.row)">
<span class="iconfont iconicon-gengduo"></span>
<el-dropdown-menu slot="dropdown" class="white is-left">
<el-dropdown-item v-for="(item, index) in operator" :key="index" :command="item.key" v-show="!(item.label=='次告警详情'&&(only_major=='0'||$store.state.alarm.alarmType=='0'))">
{{item.label}}
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
</el-table-column>
</el-table>
</div>
// 展示弹出窗 也就是图2
<select-col ref="selectCol" v-show='selectColVisible'
:modal_title="$t('alarm.view.right[0]')"
:list="newTableList"
flag="alarm"
@search="changeCol"
@closeDialog="closeBox">
</select-col>
data () {
return {
//这个是为了读取本地的文件 因为新的用户可能没有后端返回的参数 所有默认读取本地的文件 展示所有
colList: this.$store.state.view.lang === 'en' ? alarmDataEn.list : alarmData.list
}
},
methods:{
//与上面的 sortTableData 排序有关
sortTableData (rule, type, col) {
//传给后端的公共参数
this.queryObjStr.order_rule = rule
this.queryObjStr.order_colname = type
// 设置高亮状态 走一个循环 让每一个对象 加一个key highlight 和value ''
this.showCol.forEach(item => {
this.$set(item, 'highlight', '')
})
//之后让 传入的值覆盖这个value 之后上面html根据动态class 展示样式
col.highlight = rule
let params = {
startIndex: 0,
pageSize: 50,
draw: ++this.draw,
page: 1,
queryObjStr: JSON.stringify(this.queryObjStr)
}
this.loading = true
this.queryAlarm(params)
},
//勾选框
handleSelectionChange (val) {
this.selectColData = val
this.idListStr = ''
for (let i in val) {
this.idListStr += val[i].alarm_no
if (i < val.length - 1) this.idListStr += ','
}
},
headerDrag (newWidth, oldWidth, column, event) {
let currentCol = this.showCol.filter(item => item.key === column.property)
if (newWidth < currentCol[0].defaultWidth) {
this.$message.warning(this.$t('alarm.view.right[17]') + currentCol[0].defaultWidth)
column.width = oldWidth
return
}
let index = this.colList.findIndex(item => item.key === column.property)
this.colList[index].width = newWidth
},
//主要方法
queryAlarmViewColumn (update) {
this.showCol = []
this.newTableList = []
//展示后端返回的数据 判断是否展示数据
alarmApi.queryAlarmViewColumn({ tableType: 'mergeAlarm' }).then(res => {
let info = res.data.info
for (let i in info) {
if (info[i] === '0') {
this.colList.find(v => {
if (v.key === i) {
this.showCol.push({
widget: v.widget,
label: v.label,
key: i,
width: v.width,
defaultWidth: v.defaultWidth
})
return v
}
})
}
}
// 是为了传到弹出的组件中 展示的顺序 以及个数不会变
for (let i in info) {
this.colList.find(v => {
if (v.key === i) {
this.newTableList.push({
widget: v.widget,
label: v.label,
key: i,
width: v.width,
defaultWidth: v.defaultWidth
})
return v
}
})
}
//如果后端返回的是空 或者是新的用户 就默认展示本地的json文件 默认展示所有
if (this.showCol.length === 0) {
this.showCol = this.colList
this.newTableList = this.colList
}
if (update === 'update') {
this.$nextTick(function () {
this.pageCurrentChange(1)
})
}
}).catch(err => {
console.log(err)
this.$message.error(this.$t('alarm.view.message[1]'))
if (update === 'update') {
this.$nextTick(function () {
this.pageCurrentChange(1)
})
}
})
},
}
本地的json 文件部分展示
<style lang="scss">
.highlightAsc{
.ascending{
border-bottom-color:#249bff !important
}
}
.highlightDesc{
.descending{
border-top-color:#249bff !important
}
}
</style>
上面为列表文件
弹出窗部分:
插件:yarn add awe-dnd 或者 npm install awe-dnd --save
main.js文件
import VueDND from 'awe-dnd' //引入 Vue.use(VueDND) // 使用
<modal ref="modal"
:title="modal_title"
@doCancelThings="doCancelThings"
extraClass="select-col-dialog"
class="select-col dark-tree">
<div class="select-col-container">
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">{{$t('alarm.view.selectCol[0]')}}</el-checkbox>
<!-- 实现拖动 -->
<el-checkbox-group v-model="selectCol" @change="handleCheckedChange">
<el-checkbox
class="checkSonClass"
v-for="(item, index) in list" <!-- 数据是父传子传递的 -->
:label="item.key"
:key="index"
@mouseover.native="CheckBoxClick(index)"
v-dragging="{ item: item, list: list, group: 'item' }" <!-- 拖拽插件 -->
>{{ item.label }}
<span class="widthVal">
<!-- 里面展示的列的宽度 -->
<el-input-number v-model="newList[index].width" controls-position="right" onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"></el-input-number>
px
</span>
</el-checkbox>
</el-checkbox-group>
</div>
<!-- 确认取消按钮 -->
<div class="btn-div">
<el-button type="text" @click="reset">{{cancel_btn_tip}}</el-button>
<el-button type="primary" @click="save">{{sure_btn_tip}}</el-button>
</div>
</modal>
//接收参数
props: {
'modal_title': {
required: true
},
'list': {
},
'flag': {
default: 'alarm'
}
},
//监听 父传过来的参数
watch: {
list: {
deep: true,
immediate: true,
handler (val) {
this.newList = JSON.parse(JSON.stringify(val))
}
}
},
mounted () {
//拖拽
this.$dragging.$on('dragged', ({ value }) => {
this.valData = value.list
})
}
methods: {
CheckBoxClick (i) {
this.activeIndex = i
},
save () {
if (this.selectCol.length === 0) {
this.$message.warning(this.$t('alarm.view.message[16]'))
return
}
let columnDef = {}
let colunmWidth = {}
//把拖拽之后的数据 发给后端
if (this.valData.length !== 0) {
this.arr = []
for (let k = 0; k < this.valData.length; k++) {
this.arr.push(this.valData[k].key)
}
this.allCol = this.arr
} else {
if (localStorage.getItem('sortArray') == null) {
let newData = []
for (let z = 0; z < this.newList.length; z++) {
newData.push(this.newList[z].key)
}
this.allCol = newData
} else {
this.allCol = JSON.parse(localStorage.getItem('sortArray'))
}
}
for (let i in this.allCol) {
if (!this.newList[i].width || parseInt(this.newList[i].width) < this.list[i].defaultWidth || parseInt(this.newList[i].width) > 1300) {
this.$message.warning(this.list[i].label + this.$t('alarm.msg[0]') + this.list[i].defaultWidth + ', ' + this.$t('alarm.msg[1]') + 1300)
return
}
colunmWidth[this.allCol[i]] = this.newList[i].width
let index = this.selectCol.findIndex(v => v === this.allCol[i])
if (index === -1) columnDef[this.allCol[i]] = '1'
else columnDef[this.allCol[i]] = '0'
}
let tableType = ''
if (this.flag === 'alarm') {
tableType = 'mergeAlarm'
} else if (this.flag === 'secondary') {
tableType = 'minorTable'
}
let params = {
tableType: tableType,
columnDef: JSON.stringify(columnDef),
colunmWidth: JSON.stringify(colunmWidth)
}
this.saveAlarmViewColumn(params)
//存在本地 防止刷新消失
localStorage.setItem('sortArray', JSON.stringify(this.allCol))
}
}
更多推荐
已为社区贡献4条内容
所有评论(0)