数码资讯
El-Table封装（三）
自定义列的内容添加按钮或自己想要的内容 Compoents文件夹下加个 VTable.vue 文件，内容如下
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
自定义列的内容添加按钮或自己想要的内容
Compoents文件夹下加个 VTable.vue 文件，内容如下
<template>
<el-table :data="tableData" style="width: 100%">
<!-- 添加索引 -->
<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>
<el-table-column v-else-if="item.type === 'slot'" :prop="item.prop" :label="item.label" :key="item.prop" >
<!-- 套一层template,就是为了取这一行的值-->
<template slot-scope="scope">
<!-- 定义插槽动态赋值个名字 -->
<slot :name="item.slot_name" :data_row="scope.row" ></slot>
</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 {
}
}
}
</script>
<style>
</style>home.vue
效果：
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<VTable checkbox :columns="columns" :tableData="tableData">
<!-- 使用插槽 -->
<!-- v-slot:operation="slot22",这个slot22就是插槽中的数据-->
<template v-slot:operation="slot22">
<el-button type="primary" @click="jumn(slot22.data_row)" >编辑 </el-button>
</template>
</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)=>{
console.table(val);//通过回调把数据出过来，然后处理想要的格式
return `<a href="http://www.baidu.com">${val.name}</a>`
}},
{label:"姓名",prop:"name"},
{label:"地址",prop:"address",type:'address'},
{label:"性别",prop:"gener"},
{type:'slot',label:"操作",prop:"operation",slot_name:'operation'}
],
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:{
jumn(val){
console.log(val);
}
}
}
</script>
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。