el-radio点击不同按钮展示不同内容 el-radio如何做切换

先看案例：点击不同按钮展示不同内容

上代码：

<template>
  <div class="main">
    <!-- 这是按钮的组件 -->
      <el-radio-group v-model="radiotab">
        <el-radio v-model="radiotab" label="1">消费记录</el-radio>
        <el-radio v-model="radiotab" label="2">详细说明</el-radio>
        <el-radio v-model="radiotab" label="3">发票记录</el-radio>
        <el-radio v-model="radiotab" label="4">维护信息</el-radio>
      </el-radio-group>
    <!-- 这是展示的内容 -->
    <div v-if="radiotab==1">
      <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
    </el-table>
    </div>
    <div v-else-if="radiotab==2">
      <p>消费记录</p>
      <p>消费记录</p>
      <p>消费记录</p>
    </div>
    <div v-else-if="radiotab==3">
      <p>发票记录</p>
      <p>发票记录</p>
      <p>发票记录</p>
    </div>
    <div v-else-if="radiotab==4">
      <p>维护信息</p>
      <p>维护信息</p>
      <p>维护信息</p>
    </div>
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {
      //默认展示第一块内容
      radiotab: "1",
      //表格
       tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
          }]
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {},
  },
};
</script>
<style lang="scss" scoped>

</style>

 小tips：

el-radio改成按钮样式只需要把el-radio元素换成el-radio-button元素即可

   <!-- 这是按钮的组件 -->
      <el-radio-group v-model="radiotab">
        <el-radio-button v-model="radiotab" label="1">消费记录</el-radio-button>
        <el-radio-button v-model="radiotab" label="2">详细说明</el-radio-button>
        <el-radio-button v-model="radiotab" label="3">发票记录</el-radio-button>
        <el-radio-button v-model="radiotab" label="4">维护信息</el-radio-button>
      </el-radio-group>

最后

以上就是重要鸡为你收集整理的el-radio点击不同按钮展示不同内容 el-radio如何做切换的全部内容，希望文章能够帮你解决el-radio点击不同按钮展示不同内容 el-radio如何做切换所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。