vue element ui table 单选按钮

<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)">&nbsp;</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>

猜你喜欢

转载自blog.csdn.net/weixin_43173924/article/details/89639102