2、创建脚本checkBbox并且关联编辑器
3、添加脚本内容
properties: {
checkbox: {
default: null,
type: cc.Toggle
},
checkBoxEventString: {
default: null,
type: cc.Label
},
},
_updateToggleEventString: function(title, label, toggle) {
if(toggle.isChecked) {
label.string = title + " is checked."
} else {
label.string = title + " is unchecked."
}
},
checkBoxClicked: function (toggle) {
this._updateToggleEventString("CheckBox", this.checkBoxEventString, toggle)
}
//Toggle控件的属性
var index = this.checkbox.indexOf(toggle)//
单选框内容
1、创建ToggleContainer控件并且设置是否允许可以关掉开关
2、在ToggleContainer创建3个Toggle
3、脚本实现
properties: {
radioButtonEventString: {
default: null,
type: cc.Label
},
radioButton: {
default: [],//声明一个数组形势
type: cc.Toggle
}
},
_updateToggleEventString: function(title, label, toggle) {
if(toggle.isChecked) {
label.string = title + " is checked."
} else {
label.string = title + " is unchecked."
}
},
radioButtonClicked: function(toggle) {
var index = this.radioButton.indexOf(toggle)
var title = "RadioButton"
switch(index) {
case 0:
title += "1"
break
case 1:
title += "2"
break
case 2:
title += "3"
break
default:
break
一.toggleRowSelection
通过了解，结合vue的特殊属性ref引用到Dom元素上，再执行dom上的toggleRowSelection方法。
toggleRowSelection(row, selected)接受两个参数，row传递被勾选行的数据，selected设置是否选中
注意：调用toggleRowSelection这个方法 需要获取真实dom 所以需要注册 ref 来引用它
二. *** 作
(一).默认选中
1.当数据源固定在table的
mounted() {
this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true)
}
(二).点击tr选中
1.在table中设置 @row-click="handleCurrentChange"
row-click 点击行事件
<template>
<el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange">
</el-table>
</template>
<script>
export default {
methods: {
handleCurrentChange(row, event, column){
this.$refs.multipleTable.toggleRowSelection(row,true)//点击选中
}
}
}
</script>
(三).获取选中的值
1.设置table 中@selection-change="selsChange"
2.data 中设置sels:[]
<template>
<el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange" @selection-change="selsChange">
</el-table>
</template>
<script>
export default {
methods: {
selsChange( val){
this.sels=val
console.log(this.sels)
}
}
}
</script>
三.案例
1.table tr 点击 复选框选中 再次点击 复选框取消选中
①设置一个全局函数
exports.install = function (Vue, options) {
//删除数组 指定的元素
Vue.prototype.removeByValue=function(arr, val){
for(var i=0i<arr.lengthi++) {
if(arr[i] == val) {
arr.splice(i, 1)
break
}
}
}
}
<template>
<el-table :data="tableData3" ref="multipleTable" @row-click="handleCurrentChange" @selection-change="selsChange">
<el-table-column type="selection" width="55" ></el-table-column>
<el-table-column type="index" label="序号" width="60"></el-table-column>
<el-table-column prop="sex" label="性别" width="100" :formatter="formatSex"></el-table-column>
<el-table-column prop="date" label="日期"></el-table-column>
<el-table-column prop="name" label="姓名"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
<script>
export default {
data() {
return {
tableData3: [{
id:'1',
date: '2016-05-03',
name: '嘎哈和',
sex:'1'
}, {
id:'2',
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
sex:'0'
}, {
id:'3',
date: '2016-05-02',
name: '莫默模',
address: '上海市普陀区金沙江路 1518 弄',
sex:'-1'
}],
arrID:[],
}
},
methods: {
formatSex: function (row, column, cellValue, index) {
return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知'
},
// 点击事情
handleCurrentChange(row, event, column){
var same=false
if(this.arrID.length >0){
for(var i=0i<this.arrID.length i++){
if(this.arrID[i]==row.id){
same=true
this.removeByValue(this.arrID, row.id)
break
}
}
if(same==true){
this.$refs.multipleTable.toggleRowSelection(row,false)
}else{
this.$refs.multipleTable.toggleRowSelection(row,true)
this.arrID.push(row.id)
}
}else{
this.$refs.multipleTable.toggleRowSelection(row,true)
this.arrID.push(row.id)
}
},
selsChange(val){
var valId=[]
for(var i=0i<val.lengthi++){
var arrIDsame=false
valId.push(val[i].id)
}
this.arrID=valId
}
},
mounted() {
this.$refs.multipleTable.toggleRowSelection(this.tableData3[2],true)//默认选中
}
}
</script>
<style>
</style>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）