I want to use element table to click the left mouse button to select, click the ctrl+ mouse button to choose more, can you do it?
I can do the left mouse button radio, mainly because the ctrl+ left mouse button will not
I want to use element table to click the left mouse button to select, click the ctrl+ mouse button to choose more, can you do it?
I can do the left mouse button radio, mainly because the ctrl+ left mouse button will not
Hello, the effect you want has been realized. See, if you have any questions, you can ask them directly or send a private message.
<template>
<div>
<el-table
ref="multipleTable"
:data="tableData3"
tooltip-effect="dark"
style="width: 100%"
@click.native="click"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label=""
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="name"
label=""
width="120">
</el-table-column>
<el-table-column
prop="address"
label=""
show-overflow-tooltip>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData3[1], tableData3[2]])"></el-button>
<el-button @click="toggleSelection()"></el-button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData3: [{
date: '2016-05-03',
name: '',
address: ' 1518 '
}, {
date: '2016-05-02',
name: '',
address: ' 1518 '
}, {
date: '2016-05-04',
name: '',
address: ' 1518 '
}, {
date: '2016-05-01',
name: '',
address: ' 1518 '
}, {
date: '2016-05-08',
name: '',
address: ' 1518 '
}, {
date: '2016-05-06',
name: '',
address: ' 1518 '
}, {
date: '2016-05-07',
name: '',
address: ' 1518 '
}],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
},
click(e){
e.preventDefault()
console.log(this.isCtrl)
if(e.button === 0 && this.isCtrl){
this.$refs.multipleTable.toggleAllSelection()
}
}
},
mounted(){
var sUserAgent = navigator.userAgent;
var isWin = (navigator.platform == "Win32") || (navigator.platform == "Windows");
var isMac = (navigator.platform == "Mac68K") || (navigator.platform == "MacPPC") || (navigator.platform == "Macintosh") || (navigator.platform == "MacIntel");
document.addEventListener('keydown', e => {
if((e.keyCode === 17 && isWin) || (e.keyCode === 91 && isMac)){
this.isCtrl = true
}
})
document.addEventListener('keyup', e => {
if((e.keyCode === 17 && isWin) || (e.keyCode === 91 && isMac)){
this.isCtrl = false
}
})
}
}
</script>
I judged the user's operating system. If it is window, it is ctrl + left mouse button
. If it is macOS, it is command + left mouse button
there are single and multiple selections in the document Table table you can implement it yourself or you can do it yourself, listening for onkeydown events
onkeydown="keyListener(event);"
function keyListener(event){
if (event.ctrlKey){
alert('CTRL');
}
}
Previous: How to control the switch of tabs with buttons
Next: How are the variables defined in the jade template used?
use table, in element-ui in vue when a field data is null, an error will be reported when it passes through that line or the data console. The code is for reference only. let List = {loading:false,maxheight:400,data:[{OrgName:null}]} <el-table ...
now you want to get the values of all the check boxes. The document in element has not found the corresponding method to get it. I don t want to get this value through dom. I hope God will give me some advice. Orz ...