vue中在table表格里点击行勾选复选框的效果
程序员文章站
2022-04-19 19:36:19
...
先看一下效果:
这就是效果图,在项目中的效果,效果也简单就是想记录一下
下面附的代码是在页面做的实例:
html:
<template>
<div class="hello">
<el-table class="tablessp" :data="tableData" highlight-current-row @current-change="handleCurrentChange" ref="multipleTable" @select="handleSelect" @selection-change="handleSelectionChange" border fit highlight-current-row
style="width:700px;min-height:260px;margin-top:8px;" height="260"
:header-cell-style="{background:'#199ED8'}">
<el-table-column type="selection" width="60" align="center"></el-table-column>
<el-table-column prop="workSheetCode" label="工单编号" min-width="180" align="center">
</el-table-column>
<el-table-column prop="subProductCode" label="部件编号" min-width="180" align="center">
</el-table-column>
<el-table-column prop="lineName" label="生产线名称" align="center" min-width="150">
</el-table-column>
</el-table>
</div>
</template>
js
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
tableData: [{
workSheetCode: '2016-05-02',
subProductCode: '王小虎',
lineName: '上海市普陀区金沙江路 1518 弄'
}, {
workSheetCode: '2016-05-02',
subProductCode: '王小虎',
lineName: '上海市普陀区金沙江路 1518 弄'
}, {
workSheetCode: '2016-05-02',
subProductCode: '王小虎',
lineName: '上海市普陀区金沙江路 1518 弄'
}, {
workSheetCode: '2016-05-02',
subProductCode: '王小虎',
lineName: '上海市普陀区金沙江路 1518 弄'
}]
}
},
methods:{
handlck(tab, event) {
},
handleSelect(val,row){
if (val.length > 1) {
this.$refs.multipleTable.clearSelection() // 清空所有选择
val.shift()
this.$refs.multipleTable.toggleRowSelection(row) // 选中当前选择
}
let selected = val.length && val.indexOf(row) !== -1
},
handleSelectionChange(val){
},
// 单选行
handleCurrentChange(val){
this.$refs.multipleTable.clearSelection() // 清空所有选择
this.$refs.multipleTable.toggleRowSelection(val) // 选中当前选择
},
}
}
</script>
<style>
.hello .el-table thead{
color:#fff;
}
.tablessp thead tr .el-checkbox__input{
display: none;
}
</style>
上一篇: 一个漂亮的暗系色调网站主页,外表美观。