vue3 elemnt Table 表格

elemnt plus 支持vue3，但是官方用语法还是vue2，导致我们学习起来有点盲目，下面我们来看看vue3中怎么实现

image.png

<el-table
      :data="tableData"
      style="width: 100%"
       @selection-change="handleSelectionChange"
      >
      <!-- type = “selection” 增加选择功能 -->
      <el-table-column type="selection"></el-table-column>
      <el-table-column 
      v-for="item in columns"
        :key="item.prop"
        
        :prop="item.prop"
        :label="item.label"
         :formatter="item.formatter"
        width="180">
      </el-table-column>
<el-table-column
      fixed="right"
      label="操作"
      width="100">
// 编辑 删除想要在table中使用必须用蒙版，可看官方文档
      <template #default="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
        <el-button type="text" @click="handleDel(scope.row)" size="small">删除</el-button>
      </template>
    </el-table-column>
    </el-table>

<script>
import {reactive,ref,toRaw,getCurrentInstance} from 'vue'
//表单数据源  ref 和 reactive 使用意思两个差不多，定义一个变量，你可以这样想 const a=[1,2,3] 定义一个常量

// 渲染变量  prop  与数据源对应起来 拿prop 中的 user跟渲染源中user对应上就可以了
    const columns=reactive([{
            prop: 'user',
            label: '用户名id',
          }, {
            prop: 'name',
            label: '用户名',
          }, {
            prop: 'email',
            label: '用户邮箱',
          }, {
            prop: 'jiaose',
            label: '用户角色',
            formatter(row,column,value){
                return {
                    0:'管理员',
                    1:'普通用户'
                }[value]
            }
          },
           {
            prop: 'useractive',
            label: '用户状态',
            
          },
          {
            prop: 'time',
            label: '注册时间',
          },
           {
            prop: 'latetime',
            label: '最后登陆时间',
          }
          ])

//tab表哥数据源
        const tableData=ref([
            {
            user:'0',
            name: '2016-05-03',
            email: '王小虎',
            jiaose: '0',
            useractive: '普陀区',
            time: '上海市普陀区金沙江路 1518 弄',
            latetime: 200333
        },
        {
            user:'1',
            name: '2016-05-03',
            email: '王小爱',
            jiaose: '1',
            useractive: '中心区',
            time: '北京市普陀区金沙江路 1518 弄',
            latetime: 200333
        },
        {
            user:'2',
            name: '2016-05-03',
            email: '王小爱',
            jiaose: '1',
            useractive: '中心区',
            time: '北京市普陀区金沙江路 1518 弄',
            latetime: 200333
        },
        ]);
//表单校验 对应prop 
   const rules = {
//required: true 是必填意思  带*
        username: [{ required: true, message: "请输入用ID", trigger: "blur" }],
        password: [{ required: true, message: "请输入用户名", trigger: "blur" }],
         region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
    };

// vue3 ref 获取方式 
const  refruleForm=ref(null);

//编辑按钮 row 得到点击那一行的数据，可以吧对应的数据传给后台，然后后台做删除功能
const handleClick=(row)=>{
 console.log('操作编辑---',row)
        ElMessage.success({
            message: '删除成功',
            center: true
          });
}

// 操作删除 获取到id 通过数组的方式删除
const handleDel=(row)=>{
    console.log('操作删除---',row)
        ElMessage.success({
            message: '删除成功',
            center: true
          });
}

// 表格多选  看下面说明
const handleSelectionChange=(list)=>{
.//返回选择list的数据，以数组的方式返回
    console.log('表格多选---',list)
}

//定义变量一定要全部返回出去，不然ui界面得不到数据
    return{
     tableData,
   rules ，
columns，
handleDel，
handleClick，
refruleForm

}
</script>

多选说明

const handleSelectionChange=(list)=>{
//返回选择list的数据，以数组的方式返回
    console.log('表格多选---',list)
}

image.png