table显示switch切换操作
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
手动切换switch刷新表的状态
vue3代码
//将下面的Enable换为你实际的字段
//并且必须与下面的searchAfter一起使用
const onInit = async ($vm) => {
gridRef = $vm
columns.find((x) => {
if (x.field == 'Enable') {
x.render = (h, { row, column, index }) => {
//注意:row.字段，必须要有值，不能是null或者空，尽量是0/1,否则页面加载就会触发onChange
return (
<el-switch
active-value={1}
inactive-value={0}
v-model={row.Enable}
active-text={proxy.$ts('启用')}
inactive-text={proxy.$ts('禁用')}
onChange={(val) => {
//选中事件
let url=`api/表名/updateStatus?goodsId=${row.主键字段}&enable=${row.Enable}`
proxy.http.get(url, {}, true).then((result) => {
proxy.$message.success('操作成功')
})
}}
></el-switch>
)
}
}
})
}
//查询后方法：判断Enable如果没有值，需要设置默认值，否则页面加载就会触发onChange
const searchAfter = async (rows, result) => {
rows.forEach((x) => {
if (x.Enable === null) {
x.Enable = 0
}
})
return true
}
vue2代码
//将下面的Enable换为你实际的字段
//并且必须与下面的searchAfter一起使用
onInit(){
columns.find((x) => {
if (x.field == 'Enable') {
x.render = (h, { row, column, index }) => {
//注意:row.字段，必须要有值，不能是null或者空，尽量是0/1,否则页面加载就会触发onChange
return (
<el-switch
active-value={1}
inactive-value={0}
v-model={row.Enable}
active-text={proxy.$ts('启用')}
inactive-text={proxy.$ts('禁用')}
onChange={(val) => {
//选中事件
let url=`api/表名/updateStatus?goodsId=${row.主键字段}&enable=${row.Enable}`
this.http.get(url, {}, true).then((result) => {
this.$message.success('操作成功')
})
}}
></el-switch>
)
}
}
})
},
//查询后方法：判断Enable如果没有值，需要设置默认值，否则页面加载就会触发onChange
searchAfter(rows, result){
rows.forEach((x) => {
if (x.Enable === null) {
x.Enable = 0
}
})
return true
}
后台接口
//以Demo_Goods为示例，实际使用改为当前[表控制器]
public partial class Demo_GoodsController
{
private readonly IDemo_GoodsService _service;//访问业务代码
private readonly IHttpContextAccessor _httpContextAccessor;
private readonly IDemo_GoodsRepository _repository;
[ActivatorUtilitiesConstructor]
public Demo_GoodsController(
IDemo_GoodsService service,
IHttpContextAccessor httpContextAccessor,
IDemo_GoodsRepository repository
)
: base(service)
{
_service = service;
_httpContextAccessor = httpContextAccessor;
_repository = repository;
}
//更新数据，
[Route("updateStatus"), HttpGet]
public IActionResult UpdateStatus(Guid goodsId, int enable)
{
Demo_Goods goods = new Demo_Goods()
{
GoodsId = goodsId,
Enable = enable
};
_repository.Update(goods, x => new { x.Enable }, true);
return Content("修改成功");
}
}
table显示复选框
[vue3代码]写在生成的[表.vue]文件中,[vue2代码]写在[表.jsx]文件methods方法中；二选一实现
手动切换checkbox刷新表的状态
vue3代码
//将下面的Enable换为你实际的字段
//并且必须与下面的searchAfter一起使用
const onInit = async ($vm) => {
gridRef = $vm
columns.find((x) => {
if (x.field == 'Enable') {
x.render = (h, { row, column, index }) => {
//注意:row.字段，必须要有值，不能是null或者空，尽量是0/1,否则页面加载就会触发onChange
return (
<el-checkbox
true-value={1}
false-value={0}
v-model={row.Enable}
onChange={(val) => {
proxy.$message.success('选中事件' + val)
//选中事件
let url=`api/表名/updateStatus?goodsId=${row.主键字段}&enable=${row.Enable}`
proxy.http.get(url, {}, true).then((result) => {
proxy.$message.success('操作成功')
})
}}
></el-checkbox>
)
}
}
})
}
//查询后方法：判断Enable如果没有值，需要设置默认值，否则页面加载就会触发onChange
const searchAfter = async (rows, result) => {
rows.forEach((x) => {
if (x.Enable === null) {
x.Enable = 0
}
})
return true
}
vue2代码
onInited(){
//设置[Enable]字段为switch编辑状态
//注意将下面的Enable改为自己的字段
this.columns.find((x) => {
if(x.field=='字段'){
x.render= (h, { row, column, index }) => {
//注意:row.字段，必须要有值，不能是null或者空，尽量是0/1,否则页面加载就会触发onChange
//更多属性配置：https://element-plus.org/zh-CN/component/checkbox.html
return (
<el-checkbox
true-value={1}
false-value={0}
v-model={row.Enable}
onChange={(val) => {
//选中事件
let url=`api/表名/updateStatus?goodsId=${row.主键字段}&enable=${row.Enable}`
this.http.get(url, {}, true).then((result) => {
this.$message.success('操作成功')
})
}}
></el-checkbox>
);
}
}
})
}
后台接口
//以Demo_Goods为示例，实际使用改为当前[表控制器]
public partial class Demo_GoodsController
{
private readonly IDemo_GoodsService _service;//访问业务代码
private readonly IHttpContextAccessor _httpContextAccessor;
private readonly IDemo_GoodsRepository _repository;
[ActivatorUtilitiesConstructor]
public Demo_GoodsController(
IDemo_GoodsService service,
IHttpContextAccessor httpContextAccessor,
IDemo_GoodsRepository repository
)
: base(service)
{
_service = service;
_httpContextAccessor = httpContextAccessor;
_repository = repository;
}
//更新数据，
[Route("updateStatus"), HttpGet]
public IActionResult UpdateStatus(Guid goodsId, int enable)
{
Demo_Goods goods = new Demo_Goods()
{
GoodsId = goodsId,
Enable = enable
};
_repository.Update(goods, x => new { x.Enable }, true);
return Content("修改成功");
}
}