数码资讯
简单El-Table封装（四）
获取checkbox中的值 VTable.vue组件
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
获取checkbox中的值
VTable.vue组件
<template> <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange"> <!-- 添加索引 --> <el-table-column type="index" width="55"></el-table-column> <!-- 添加一个复选框 --> <el-table-column checkbox v-if="checkbox" type="selection" width="55" > </el-table-column> <template v-for="item in columns"> <!--v-if 判断类型 --> <el-table-column v-if="item.type === 'function'" :prop="item.prop" :label="item.label" :key="item.prop" > <!-- 套一层template,就是为了取这一行的值--> <template slot-scope="scope"> <!-- 这里可以把数据传给callback函数 --> <div v-html="item.callback && item.callback(scope.row)" ></div> </template> </el-table-column> <!-- 添加一个type标识用来标注类型的唯一性 --> <el-table-column v-else-if="item.type==='address'" :prop="item.prop" :label="item.label" :key="item.prop" > <template slot-scope="scope"> <!-- 渲染有html标签的 --> <div v-html="scope.row.address"></div> </template> </el-table-column> <el-table-column v-else :prop="item.prop" :label="item.label" :key="item.prop"> </el-table-column> </template> </el-table> </template> <script> export default { name:"VTable", props:{ //接收列 columns:{ type:Array, default:()=>[] }, //接收数据 tableData:{ type:Array, default:()=>[] }, checkbox:Boolean }, data() { return { } }, methods:{ handleSelectionChange(val) { console.log(val); this.$emit("CheckVal",val) } } } </script> <style> </style>
Home.vue
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <VTable checkbox :columns="columns" :tableData="tableData" @CheckVal="CheckVal"></VTable> </div> </template> <script> // @ is an alias to /src import VTable from '@/components/VTable.vue' export default { name: 'Home', data(){ return{ columns:[ { type:'function', //定义函数类型，用于回调 label:"URL地址", prop:"date", callback:(val)=>{ //通过回调把数据出过来，然后处理想要的格式 return `<a href="https://www.baidu.com">${val.name}</a>` }}, {label:"姓名",prop:"name"}, {label:"地址",prop:"address",type:'address'}, {label:"性别",prop:"gener"} ], tableData: [{ date: '2016-05-02', name: '王小虎', address: '上海市普陀区金沙江路 <div style="color:red">1518</div> 弄', //这里有html标签 gener:"男" }, { date: '2016-05-04', name: '王小虎', address: '上海市普陀区金沙江路 1517 弄', gener:"女" }, { date: '2016-05-01', name: '王小虎', address: '上海市普陀区金沙江路 1519 弄' }, { date: '2016-05-03', name: '王小虎', address: '上海市普陀区金沙江路 1516 弄' }] } }, components: { VTable }, methods:{ CheckVal(val){ console.log("CheckVal",val); } } } </script>
获取checkbox第二种方法
通过数据同步的方式
VTable.vue中添加内容
props:{
//接收列
columns:{
type:Array,
default:()=>[]
},
//接收数据
tableData:{
type:Array,
default:()=>[]
},
checkbox:Boolean,
checkList:{
type:Array,
default:()=>{}
}
},
methods:{
handleSelectionChange(val) {
console.log(val);
this.$emit("update:checkList",val)
}
}
Home.vue中添加内容
<template> <div class="home"> <img alt="Vue logo" src="../assets/logo.png"> <!-- sync修饰符 --> <VTable checkbox :columns="columns" :tableData="tableData" :check-list.sync="check_list"></VTable> </div> </template>
data(){
return{
check_list:[]
}
}
watch:{
check_list: { //通过监听的方式来获取值
handler(value) {
console.log("22",value);
}
}
},
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。