vue中的jsx语法用于element表格
用于element中的表格操作按钮区域1. 正常的写法{label: '编辑',prop: '',width: 150,render: (h, { row }) => {const { online } = row;return h('div', [h('el-button', {props: {type: 'primary',size: 'small',},
·
用于element中的表格操作按钮区域
1. 正常的写法
{
label: '编辑',
prop: '',
width: 150,
render: (h, { row }) => {
const { online } = row;
return h('div', [
h('el-button', {
props: {
type: 'primary',
size: 'small',
},
on: {
click: () => {
that.paymentTime.restaurantId = row.restaurantId;
that.dialogTableVisible = true;
},
},
}, '缴费'),
h('el-button', {
props: {
type: online ? 'success' : 'danger',
size: 'small',
},
on: {
click: () => {
const { restaurantId } = row;
if (online) {
// 启用 点击 参数0
that.startAndStop(restaurantId, 0);
} else {
that.$confirm('您确定要执行停用操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
that.startAndStop(restaurantId, 1);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消停用操作',
});
});
}
},
},
}, online ? '启用' : '停用'),
]);
},
},
2. 简单的写法
{
label: '编辑',
prop: '',
width: 150,
render: (h, { row }) => (
<div>
<el-button
type="primary"
size="small"
onClick={ () => {
that.paymentTime.restaurantId = row.restaurantId;
that.dialogTableVisible = true;
}}
>
缴费
</el-button>
<el-button
type={ row.online ? 'success' : 'danger' }
size="small"
onClick={ () => {
const { restaurantId } = row;
if (row.online) {
// 启用 点击 参数0
that.startAndStop(restaurantId, 0);
} else {
that.$confirm('您确定要执行停用操作吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
that.startAndStop(restaurantId, 1);
}).catch(() => {
this.$message({
type: 'info',
message: '已取消停用操作',
});
});
}
}}
>
{row.online ? '启用' : '停用'}
</el-button>
</div>
),
},
更多推荐
已为社区贡献18条内容
所有评论(0)