console
var Main = {
data() {
return {
tableData: [{
code:1001,
date: '2016-05-03',
name: '王小虎',
address: '这是一个测试通知',
time:'2019-01-01 ~ 2019-05-01',
area:'11:00~12:00',
},{
code:1001,
date: '2016-05-03',
name: '王小虎',
address: '这是一个测试通知',
time:'2019-01-01 ~ 2019-05-01',
area:'11:00~12:00',
},{
code:1001,
date: '2016-05-03',
name: '王小虎',
address: '这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知这是一个测试通知',
time:'2019-01-01 ~ 2019-05-01',
area:'11:00~12:00',
},{
code:1001,
date: '2016-05-03',
name: '王小虎',
address: '这是一个测试通知',
time:'2019-01-01 ~ 2019-05-01',
area:'11:00~12:00',
},{
code:1001,
date: '2016-05-03',
name: '王小虎',
address: '这是一个测试通知',
time:'2019-01-01 ~ 2019-05-01',
area:'11:00~12:00',
},],
multipleSelection: []
}
},
methods: {
toggleSelection(rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row);
});
} else {
this.$refs.multipleTable.clearSelection();
}
},
handleSelectionChange(val) {
this.multipleSelection = val;
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.9.0/lib/index.js"></script>
<div id="app">
<template>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
label="编号"
prop="code"
width="75">
</el-table-column>
<el-table-column
label="日期"
width="120">
<template slot-scope="scope">{{ scope.row.date }}</template>
</el-table-column>
<el-table-column
prop="address"
label="内容"
show-overflow-tooltip>
</el-table-column>
<el-table-column
label="播放时间"
prop="time"
width="220">
</el-table-column>
<el-table-column
label="播放时段"
prop="area"
width="220">
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button
size="mini"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
size="mini"
type="danger"
@click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<div style="margin-top: 20px">
<el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button>
<el-button @click="toggleSelection()">取消选择</el-button>
</div>
</template>
</div>
@import url("//unpkg.com/element-ui@2.9.0/lib/theme-chalk/index.css");