layui table结合vue实现行 新增 删除 修改
1.demo效果图如下，集合了layui的单选、时间、下拉；解决了layui与vue的时间(laydate)、下拉(select) 插件数据绑定 v-model问题；
demo 地址：http://www.plgo.top/demo/layUITableVueDemo.html
效果图
2.全部代码如下，只需复制下面代码新建html 打开即可
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layuiTable用vue实现行编辑 修改</title>
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>默认表格</legend>
</fieldset>
<div id="app">
<button type="button" class="layui-btn" @click="addRow">新增</button>
<form class="layui-form" action="">
<div class="layui-form" id="">
<table class="layui-table">
<colgroup>
<col width="150">
<col width="150">
<col width="100">
<col width="50">
<col width="50">
</colgroup>
<thead>
<tr >
<th>名称</th>
<th>性别</th>
<th>生日</th>
<th>年级</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in showMealList">
<td><input type="text" name="userName" placeholder="请输入" autocomplete="off" class="layui-input" v-model="item.userName"></td>
<td>
<div class="layui-inline">
<input type="radio" v-bind:name="'sex_'+index" value="男" title="男" :checked="item.sex==1">
<input type="radio" v-bind:name="'sex_'+index" value="女" title="女" :checked="item.sex==2">
</div>
</td>
<td><input type="datetime" class="layui-input data" v-bind:name="'data_'+index" v-bind:rowIndex="index" name="data" v-model="item.data"></td>
<td>
<select style="width: 80px;" name="grade" v-bind:rowIndex="index" v-model="item.grade">
<option></option>
<option v-for="(gradeObj, gradeIndex) in grades" :checked="item.grade==gradeObj">{{gradeObj}}</option>
</select>
</td>
<td><button type="button" class="layui-btn" @click="delRow(index)">删除</button></td>
</tr>
</tbody>
</table>
</div>
</form>
</div>
<script type="text/javascript">
var form ;
var laydate;
layui.use(['form','laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function() {
form = layui.form;
laydate = layui.laydate; //日期
var laypage = layui.laypage //分页
,layer = layui.layer //弹层
,table = layui.table //表格
,carousel = layui.carousel //轮播
,upload = layui.upload //上传
,element = layui.element; //元素操作 等等...
laydateRender();
form.on('select', function(data){
var rowValue = data.elem.getAttribute('rowIndex');
//这里加个name 可以区分同一行多个select
var valueName = data.elem.getAttribute('name');
app.showMealList[rowValue][valueName] = data.value;
});
});
function laydateRender(){
lay('.data').each(function(){
laydate.render({
elem: this
,trigger: 'click'
,showBottom: false
,done: function (value) { // value 是laydate选择的日期
this.value = value; // vue对象的属性设置为当前的日期
//这里注意要获取行数 然后把该行的时间对象更新了
var rowValue = this.elem.attr('rowIndex');
app.showMealList[rowValue].data = value;
}
});
});
}
var app = new Vue({
el: '#app',
data: {
message:' ',
grades:[1,2,3,4,5,6],
rowObj:{
userName:'',
sex:1,
data:'',
grade:''
},
showMealList:[]
},
created: function () {
this.showMealList[0] = JSON.parse(JSON.stringify(this.rowObj))
},
watch:{
},
methods:{
addRow:function(){
console.log('addRow')
//this.$set(this.showMealList, showMealListlength, this.rowObj);
var newObj = JSON.parse(JSON.stringify(this.rowObj))
this.showMealList.push(newObj)
},
delRow:function(rowIndex){
console.log(rowIndex)
this.showMealList.splice(rowIndex,1);
}
},
updated:function(){
form.render();
laydateRender();
}
})
</script>
</body>
</html>
如果帮助到你，可以打赏我喔~
网友评论