<template>
<el-dialog title='数据源列表' :visible.sync="dialogFormVisible" width="50%" append-to-body>
<el-table size='medium' :data="tableData" border style="width:100%;margin-bottom:20px;">
<el-table-column label="" width="50">
<template slot-scope="scope">
<el-radio :label="scope.row.id" v-model="radio" @change.native="getCurrentRow(scope)"> </el-radio>
</template>
</el-table-column>
<el-table-column prop="name" label="数据源名称"></el-table-column>
<el-table-column prop="type" label="数据源类型"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column prop="createTime" label="更新时间"></el-table-column>
</el-table>
<el-pagination
v-show="isPage"
@current-change="handleCurrentChange"
:current-page="page.currentPage"
:page-size="page.pageSize"
layout="total, prev, pager, next, jumper"
:total="page.totalCount"
background
style="float:right;">
</el-pagination>
<div slot="footer">
<el-button type="primary" size="small" @click="sureMethod">确 定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
data() {
return {
dialogFormVisible: false,
radio: '', // 值为当前行的id
tableData: [],
page: {
currentPage: 1, // 当前页
pageSize: 10, // 每页显示条目个数
totalCount: 0 // 总条目数
},
isPage: false,
rowObj:{},
dataSourceId:''
}
},
created() {
},
methods: {
showDialog(id) {
this.dialogFormVisible = true
this.dataSourceId = id
this.dataSourceMe(1)
},
dataSourceMe(pageNo) {
this.$http
.post(url, {
start: pageNo?pageNo:1,
pageSize: 10
})
.then(res => {
if (res.data.success) {
console.log(res.data.data)
this.tableData = res.data.data.result
this.isPage = true
this.$set(this.page, 'totalCount', res.data.data.total)
this.$set(this.page, 'pageSize', res.data.data.pageSize)
this.$set(this.page, 'currentPage', res.data.data.currentPage)
if (this.dataSourceId && this.dataSourceId!=='') {
for(let item of this.tableData) {
if (item.id === this.dataSourceId) {
this.radio = this.dataSourceId
}
}
}
}
})
.catch(function(error) {
console.log(error)
})
},
handleCurrentChange(val) {
this.dataSourceMe(val)
},
getCurrentRow(scope) {
this.rowObj = scope.row
},
sureMethod() {
this.$emit('dataSourceMethod', this.rowObj)
this.dialogFormVisible = false
}
}
}
</script>
<style scoped>
</style>
vue element ui table 单选按钮
猜你喜欢
转载自blog.csdn.net/weixin_43173924/article/details/89639102
今日推荐
周排行