vue3 elemnt Table 表格
2021-06-30 本文已影响0人
小李不小
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