开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第11天，点击查看活动详情
onload数据回调
通过给组件传值，定义一个onload布尔类型，来确定去不去数据回调，确定的话就用$emit()去执行，就是简单介绍一下子传父的例子，看代码
<template>
<a-table ref="table" on-load @onload="onload" index :checkbox="false" :init-request="false" :column="column" :data="data_1" :params="data_2" url="/api/home" method="get">
<template v-slot:operation="slot">
<el-button type="primary">编辑</el-button>
<el-button @click="jumn(slot.data)">删除</el-button>
</template>
</a-table>
</template>
//props
onLoad: Boolean,//默认是fasle
this.$axios({request_data}).then((Response => {
this.tableData = Response.data
//回调数据
this.onLoad && this.$emit("onload",Response.data)
}))
//打印回调的结果
onload(data) {
console.log(data);
}
格式化数据后渲染列表
就是说当我们的数据请求回来的时候，优先对这个数据格式话一下然后在去处理，这个我们工作中不是很常见，但是也会用到 这里我们传一个:format="formatData"的函数，利用回调的数据来进行格式化
<a-table ref="table" on-load :format="formatData" @onload="onload" index :checkbox="false" :init-request="false" :column="column" :data="data_1" :params="data_2" url="/api/home" method="get">
<template v-slot:operation="slot">
<el-button type="primary">编辑</el-button>
<el-button @click="jumn(slot.data)">删除</el-button>
</template>
</a-table>
这里我们用this.format()函数去进行数据处理
//props
format: Function,
//script
this.$axios({request_data}).then((Response => {
let request_data = Response.data
if(this.format && typeof this.format=== 'function') {
request_data = this.format(Response.data)
}
this.tableData = request_data
//回调数据
this.onLoad && this.$emit("onload",Response.data)
}))
这里我们进行打印一下，看看数据返回了没有
formatData(data) {
console.log(data);
}
我们就把数据第一个给返回出去，我们返回的是数组，就直接用[ ]就可以
formatData(data) {
const request_data = [data[0]]
return request_data
}
附完整代码
<template>
<a-table ref="table" on-load :format="formatData" @onload="onload" index :checkbox="false" :init-request="false" :column="column" :data="data_1" :params="data_2" url="/api/home" method="get">
<template v-slot:operation="slot">
<el-button type="primary">编辑</el-button>
<el-button @click="jumn(slot.data)">删除</el-button>
</template>
</a-table>
</template>
<script>
export default {
name: "Home",
components: {
"a-table": () => import("@/components/table/index"),
},
data() {
return {
data_1: {
name: 22
},
data_2: {
name: 255555
},
column: [
{
type: 'function',
label: "URL地址",
prop: "date" ,
callback: (data) => {
return `<a href="https://www.taobao.com/">${data.name}</a>`
}
},
{ label: "姓名", prop: "name" },
{ label: "地址", prop: "address" },
{
type: 'slot',
label: "操作",
prop: 'operation',
slot_name: "operation"
}
],
};
},
mounted() {
setTimeout(() => {
this.$refs.table.handlerRequest()
},2000)
},
methods: {
jumn(data) {
console.log(data);
},
//打印回调的结果
onload(data) {
console.log(data);
},
formatData(data) {
const request_data = [data[0]]
return request_data
}
}
};
</script>
<template>
<el-table :data="tableData" style="width: 100%">
<el-table-column v-if="index" type="index" width="40px"></el-table-column>
<el-table-column v-if="checkbox" type="selection" width="40px"></el-table-column>
<template v-for="item in column">
<el-table-column v-if="item.type === 'function'" :key="item.prop" :prop="item.prop" :label="item.label">
<template slot-scope="{row}">
<div v-html="item.callback && item.callback(row)"></div>
</template>
</el-table-column>
<el-table-column v-if="item.type === 'slot'" :key="item.prop" :prop="item.prop" :label="item.label">
<template slot-scope="{row}">
<slot :name="item.slot_name" :data="row"></slot>
</template>
</el-table-column>
<el-table-column v-else :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
</template>
</el-table>
</template>
<script>
export default {
name: "Table",
props: {
column: {
type: Array,
default: () => []
},
checkbox: {
type: Boolean,
default: true
},
initRequest: {
type: Boolean,
default: true
},
url:{
type: String,
default: "",
require: true
},
method: {
type: String,
default: "post",
require: true
},
data: {
type: Object,
default: () => {}
},
params: {
type: Object,
default: () => {}
},
format: Function,
index: Boolean,
onLoad: Boolean,//默认是fasle
},
data() {
return {
tableData: [],
};
},
beforeMount() {
this.initRequest && this.getTableList()
},
methods: {
getTableList() {
const url = this.url
if(!url) {
console.log("请求地址不存在");
return false
}
const request_data = {
url: this.url,
method: this.method
}
if(JSON.stringify(this.data) != '{}') {
request_data.data = this.data
}
if(JSON.stringify(this.params) != '{}') {
request_data.params = this.params
}
this.$axios({request_data}).then((Response => {
let request_data = Response.data
if(this.format && typeof this.format=== 'function') {
request_data = this.format(Response.data)
}
this.tableData = request_data
//回调数据
this.onLoad && this.$emit("onload",Response.data)
}))
},
handlerRequest() {
this.getTableList()
}
}
};
</script>
