Vue结合Element-UI实现单元格编辑、删除等操作
element
A Vue.js 2.0 UI Toolkit for Web
项目地址：https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
Element-ui的表格
链接地址：http://element-cn.eleme.io/#/zh-CN/component/table
操作一： 删除
在 组件中添加 @selection-change=“handleSelectionChange” 事件，并在el-table-column组件中添加类型为selection
<div>
<el-button
size="mini"
type="danger"
@click="handleBtnDelete"
>删除
</el-button>
</div>
<el-table
:data="tableData"
border
ref="multipleTable"
style="width: 100%"
@cell-dblclick="changeInput"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
align="center"
width="55">
</el-table-column>
<!-- ....... -->
</el-table>
具体方法：
export default {
name: 'StandardLevel',
data () {
return {
// 用来存放需要删除的数据ID
multipleSelection: [],
// ....
}
},
methods: {
// 删除数据
handleBtnDelete () {
console.log(this.multipleSelection.length)
let tempSelection = this.multipleSelection
let tempTableData = this.tableData
for (let i of tempSelection) {
tempTableData.splice(tempTableData.findIndex(item => item.id === i), 1)
}
this.tableData = tempTableData
},
// 复选框选中
handleSelectionChange (val) {
console.log('插入数据 => ' + val)
this.multipleSelection = []
for (let item of val) {
this.multipleSelection.push(item.id)
}
}
}
}
</script>
操作二： 单元格编辑
这个可以使用template中添加其他的组件，利用element-ui的slot-scope属型
在页面加载的时候生成一个和表格数据相对应的表格编辑框是否显示的数据，并初始化为false。
<el-table-column
prop="date"
label="代码"
sortable
width="180"
align="center"
>
<template slot-scope="{row,$index}">
<el-input
v-if="showEdit[$index]['date']"
v-model="row.date"
@change="handleEdit(row, $index)"
@blur="inputBlur"
v-focus
/>
<span v-if="!showEdit[$index]['date']">{{row.date}}</span>
</template>
</el-table-column>
具体方法：
export default {
name: 'StandardLevel',
components: {
CommonContext
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.getElementsByTagName('input')[0].focus()
// el.focus()
}
}
},
data () {
return {
// 显示编辑框
showEdit: [],
// 表格数据
tableData: [
{
id: 1,
date: '2016-05-02',
name: '上海市普陀区金沙江路 1518 弄',
color: '#ff4500',
priority: 1
}, {
id: 2,
date: '2016-05-04',
name: '上海市普陀区金沙江路 1518 弄',
color: '#ff8c00',
priority: 4
}
]
}
},
mounted () {
this.setShowEdit()
},
watch: {
// 监控tableData数据，发生改变的时候跟新单元格显示状态
tableData: function () {
console.log('数据更新')
this.setShowEdit()
}
},
methods: {
// 初始化单元格显示状态
setShowEditInit () {
for (let item of this.showEdit) {
for (let innerItem in item) {
item[innerItem] = false
}
}
},
// 设置单元显示转态数据
setShowEdit () {
let tempShowEdit = []
for (let item of this.tableData) {
let tempShow = {}
for (let innerItem in item) {
tempShow[innerItem] = false
}
tempShowEdit.push(tempShow)
}
this.showEdit = tempShowEdit
},
// 切换单元格为编辑
changeInput (row, column, cell, event) {
this.setShowEditInit()
let nowObj = column.property
let index = this.tableData.findIndex((item) => {
return item.id === row.id
})
this.showEdit[index][nowObj] = !this.showEdit[index][nowObj]
},
handleEdit (row, index) {
console.log(row)
console.log(index)
this.tableData[index] = row
},
// 失焦
inputBlur () {
this.setShowEditInit()
}
}
}
</script>
操作三： 结合其他的组件
element-ui在el-table-colum组件中使用template可以很方便的添加各种组件
<!-- 拾色器 -->
<el-table-column
prop="color"
sortable
label="颜色"
width="180"
align="center"
>
<template slot-scope="scope">
<el-color-picker
v-model="scope.row.color"
show-alpha
@change="colorChange(scope.row, scope.$index)"
:predefine="predefineColors">
</el-color-picker>
</template>
</el-table-column>
<!-- 下拉框 -->
<el-table-column
prop="priority"
sortable
label="优先级"
width="90"
align="center"
>
<template slot-scope="{row,$index}">
<el-select v-model="row.priority" placeholder="请选择" @change="selectChange(row, $index)">
<el-option
v-for="item in priorityList"
:key="item.id"
:label="item.priority"
:value="item.priority">
</el-option>
</el-select>
</template>
</el-table-column>
操作四： 增加
对于增加来说，很简单，就是在表格数据中添加一条数据，不做过多赘述。
操作五： 排序
sortable 可以达到排序的目的，如果你自己写也可以，反正对于 mvvm框架来说，操作数据就是最关键的。
<el-table-column
prop="priority"
sortable
label="优先级"
width="90"
align="center"
>
完整代码
<template>
<common-context>
<div class="block-context">
<div>
<el-button
style="margin-left: 2px;"
size="mini" icon="el-icon-edit"
type="primary">
</el-button>
<el-button
size="mini"
type="danger"
@click="handleBtnDelete"
>
删除
</el-button>
</div>
<el-table
:data="tableData"
border
ref="multipleTable"
style="width: 100%"
@cell-dblclick="changeInput"
@selection-change="handleSelectionChange"
>
<el-table-column
type="selection"
align="center"
width="55">
</el-table-column>
<el-table-column
prop="date"
label="代码"
sortable
width="180"
align="center"
>
<template slot-scope="{row,$index}">
<el-input
v-if="showEdit[$index]['date']"
v-model="row.date"
@change="handleEdit(row, $index)"
@blur="inputBlur"
v-focus
/>
<span v-if="!showEdit[$index]['date']">{{row.date}}</span>
</template>
</el-table-column>
<el-table-column
prop="name"
label="描述"
>
<template slot-scope="{row,$index}">
<el-input
v-if="showEdit[$index]['name']"
v-model="row.name"
@change="handleEdit(row, $index)"
@blur="inputBlur"
v-focus
/>
<span v-if="!showEdit[$index]['name']">{{row.name}}</span>
</template>
</el-table-column>
<el-table-column
prop="color"
sortable
label="颜色"
width="180"
align="center"
>
<template slot-scope="scope">
<el-color-picker
v-model="scope.row.color"
show-alpha
@change="colorChange(scope.row, scope.$index)"
:predefine="predefineColors">
</el-color-picker>
</template>
</el-table-column>
<el-table-column
prop="priority"
sortable
label="优先级"
width="90"
align="center"
>
<template slot-scope="{row,$index}">
<el-select v-model="row.priority" placeholder="请选择" @change="selectChange(row, $index)">
<el-option
v-for="item in priorityList"
:key="item.id"
:label="item.priority"
:value="item.priority">
</el-option>
</el-select>
</template>
</el-table-column>
</el-table>
</div>
</common-context>
</template>
<script>
import { colorToHex } from '@/utils/colorToHex'
import CommonContext from '@/pages/common/CommonContext'
export default {
name: 'StandardLevel',
components: {
CommonContext
},
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.getElementsByTagName('input')[0].focus()
// el.focus()
}
}
},
data () {
return {
multipleSelection: [],
// 显示编辑框
showEdit: [],
// 优先级数据
priorityList: [
{
id: 1,
priority: 1
},
{
id: 2,
priority: 2
},
{
id: 3,
priority: 3
},
{
id: 4,
priority: 4
}
],
// 表格数据
tableData: [
{
id: 1,
date: '2016-05-02',
name: '上海市普陀区金沙江路 1518 弄',
color: '#ff4500',
priority: 1
}, {
id: 2,
date: '2016-05-04',
name: '上海市普陀区金沙江路 1518 弄',
color: '#ff8c00',
priority: 4
}, {
id: 3,
date: '2016-05-01',
name: '上海市普陀区金沙江路 1518 弄',
color: '#00ced1',
priority: 3
}, {
id: 4,
date: '2016-05-03',
name: '上海市普陀区金沙江路 1518 弄',
color: '#c71585',
priority: 6
}
],
// 颜色数据
color5: 'rgba(255, 69, 0, 0.68)',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585'
]
}
},
mounted () {
this.setShowEdit()
},
watch: {
// 监控tableData数据，发生改变的时候跟新单元格显示状态
tableData: function () {
console.log('数据更新')
this.setShowEdit()
}
},
methods: {
// 初始化单元格显示状态
setShowEditInit () {
for (let item of this.showEdit) {
for (let innerItem in item) {
item[innerItem] = false
}
}
},
// 设置单元显示转态数据
setShowEdit () {
let tempShowEdit = []
for (let item of this.tableData) {
let tempShow = {}
for (let innerItem in item) {
tempShow[innerItem] = false
}
tempShowEdit.push(tempShow)
}
this.showEdit = tempShowEdit
},
// 下拉框修改
selectChange (row, index) {
let tempTableData = this.tableData
tempTableData[index] = row
this.tableData = tempTableData
},
// 拾色器修改
colorChange (row, index) {
let tempRow = row
let tempTableData = this.tableData
let hexColor = colorToHex(tempRow.color)
tempTableData[index].color = hexColor
this.tableData = tempTableData
},
// 切换单元格为编辑
changeInput (row, column, cell, event) {
this.setShowEditInit()
let nowObj = column.property
let index = this.tableData.findIndex((item) => {
return item.id === row.id
})
this.showEdit[index][nowObj] = !this.showEdit[index][nowObj]
},
handleEdit (row, index) {
console.log(row)
console.log(index)
this.tableData[index] = row
},
// 失焦
inputBlur () {
this.setShowEditInit()
},
// 增加数据
handleBtnAdd (index, row) {
// console.log(index, row)
// this.tableData.splice(index, 0, {})
},
// 删除数据
handleBtnDelete () {
console.log(this.multipleSelection.length)
let tempSelection = this.multipleSelection
let tempTableData = this.tableData
for (let i of tempSelection) {
tempTableData.splice(tempTableData.findIndex(item => item.id === i), 1)
}
this.tableData = tempTableData
},
// 复选框选中
handleSelectionChange (val) {
console.log('插入数据 => ' + val)
this.multipleSelection = []
for (let item of val) {
this.multipleSelection.push(item.id)
}
}
}
}
</script>
有错误留言给我，相互学习，嘻嘻！
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支：3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
6
0- 0
已为社区贡献4条内容
所有评论(0)