开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情
获取checkbox的数据
我们看一下element-ui的官方文档，我们可以得知 selection-change这个方法 可以获取checkbox的回调
<template>
<el-table
:data="tableData"
style="width: 100%"
@selection-change="handleSelectionChange">
>
</el-table>
</template>
//script
handleSelectionChange(val) {
console.log(val);
}
当我们点击单选框时，这时候我们就可以打印出这一行的数据，选择多个的话就放到一个数组里面
这里我们通过:check-list.sync="check_list"来进行数据同步，子组件通过this.$emit("update:checkList",val)那数据同步出去，父组件watch去监听
<template>
<a-table ref="table" on-load :check-list.sync="check_list" :format="formatData" @onload="onload" index :checkbox="true" :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
data() {
return {
check_list: []
};
},
//Table组件
props: {
checkList: {
type:Array,
default: () => []
},
},
handleSelectionChange(val) {
this.$emit("update:checkList",val)
}
通过watch的方法也可以定义一个点击事件
watch: {
check_list: {
handler(n, o) {
console.log(111,n);
}
}
},
我们也可以获取到自己想要的数据
sorttable排序
在列中设置sortable属性即可实现以该列为基准的排序，接受一个Boolean，默认为false
<el-table-column :sortable="item.sort" v-else :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
我们想要在哪里加排序只需要在自定义内容里面加一个sort=true即可,这里我们在url地址表头上面加了
data() {
return {
column: [
{
label: "URL地址",
sort: true,
prop: "date" ,
},
{ label: "姓名", prop: "name" },
{ label: "地址", prop: "address" },
{
type: 'slot',
label: "操作",
prop: 'operation',
slot_name: "operation"
}
],
};
},
这样就方便的显示出来了
附完整代码
<template>
<a-table ref="table" on-load :check-list.sync="check_list" :format="formatData" @onload="onload" index :checkbox="true" :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 {
check_list: [],
data_1: {
name: 22
},
data_2: {
name: 255555
},
column: [
{
label: "URL地址",
sort: true,
prop: "date" ,
},
{ label: "姓名", prop: "name" },
{ label: "地址", prop: "address" },
{
type: 'slot',
label: "操作",
prop: 'operation',
slot_name: "operation"
}
],
};
},
watch: {
check_list: {
handler(n, o) {
console.log(111,n);
}
}
},
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%"
@selection-change="handleSelectionChange">
>
<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 :sortable="item.sort" v-else :key="item.prop" :prop="item.prop" :label="item.label"></el-table-column>
</template>
</el-table>
</template>
<script>
export default {
name: "Table",
props: {
checkList: {
type:Array,
default: () => []
},
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()
},
handleSelectionChange(val) {
this.$emit("update:checkList",val)
}
}
};
</script>
