基于Vue，网页web前端开发培训

代码如下：

<template>
    <div>
        <!-- 列表信息 -->    
        <div class="listfile">
            <i-table border ref="selection" :columns="columns2" :data="data3"></i-table>
            <div style="margin: 10px;overflow: hidden">
                <div style="float: right;">
                    <Page :total="dataCount" :page-size="20" show-total :current="currentPage"></Page>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
   data () {
        return {
                dataCount:1,// 初始化信息总条数
                currentPage:1, //当前页
                pageSize:20,// 每页显示多少条
                columns2: [
                    {type: 'selection', width: 60,align: 'center'},
                    {title: '使用状态',key: 'usestate',width: 200,align: 'center',
                        render:(h, params) => {
                            return h('RadioGroup',
                                {
                                    props: {
                                        value: params.row.usestate //这里的value值对应Radio中的label中的值
                                    },
                                    on:{
                                        "on-change":(val)=>{
                                            params.row.usestate = val;
                                            console.log(val,"测试radio选中的项",params.row.usestate);
                                        }
                                    }
                                }, 
                            [
                                h('Radio', {
                                    style:{'margin-right': '20px'},
                                    props:{
                                        "label":"1"
                                    },
                                }, '未使用'),
                                h('Radio', {
                                    props:{
                                        "label":"2"
                                    }
                                }, '已使用')
                            ]);
                        }
                    },
                ],
                //列表初始数据
                data3: [
                    {
                        usestate: '1',
                    },
                    {
                        usestate: '2',
                    }
                ],
              }
      },
    methods: {
    },
    created(){
    },
    mounted(){
    },

  }
</script>

<style>

</style>

注意事项：

变量传值时，因为用的是tab， 获取时只能是：usertate:   params.row.usestate;

所以传值时强制传：

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

[外链图片转存中…(img-wAcA4APf-1727197658189)]