效果 一,template核心代码
Table( :data="tableData", :columns="col", :loading="loading", stripe, @on-select="on_select", @on-select-cancel="on_selection_cancel", @on-select-all="on_select_all", @on-select-all-cancel="on_select_all_cancel" ) Page( ref="pageRef", v-if="total > 0", :total="total", :page-size="pageSize", prev-text="上一页", next-text="下一页", @on-change="pageChange" )二,js核心代码
private col: any[] = [ { type: "selection", width: 60, align: "center", }, { _checked: "true", title: "商品名称", key: "index", tooltip: true, }, { title: "单价（元）", key: "index", tooltip: true, }, { title: "商品说明", key: "index", tooltip: true, }, { title: "数量（件）", key: "index", render: (h: any, params: any) => { return h("div", [ h("Input", { // dom的样式文件 style: { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis", border: " 1px solid #ddd", borderRadius: "20px", height: "32px", }, // 绑定事件 on: { "on-blur": (event) => { let reg = /^[1-9][0-9]{0,2}$/; let value = event.target.value;//input框中的value值 let table_data = this.blur_data();//这是iview+table中的一个坑,详见https://blog.csdn.net/juvialoxer/article/details/108398778 if (reg.test(value) && value < 1001) { table_data.map((item: any) => { if (item.id == params.row.id) { //如果table中的data与行内的id一致,便更新table的data数据 item.count = event.target.value; } }); } else { table_data.map((item: any) => { if (item.id == params.row.id) { //如果用户的value值不符合规则,则清空input中的值 item.count = ""; } }); //浅拷贝 let list = table_data; table_data = Object.assign([], list); event.target.value = "";//当用户清除input内的数据时,页面中不会清除,所以需要清除使用该方法 if (value) { this.$Message.warning("请输入小于等于1000件的商品数量"); } } }, }, // 绑定vue的属性 props: { value: params.row.count, type: "number", number: true, placeholder: "请输入1~1000的正整数", }, // 绑定生成的dom的属性 }), ]); }, }, ];由于在table中input无法实现双向绑定,故使用input的on-blur事件并获取到event中的event.target.value
三,复选框的事件
// 复选框 // 选中某一项触发 private on_select(selection: Array<any>, row: any) {} // 取消选中某一项触发 private on_selection_cancel(selection: Array<any>, row: any) {} // 全选时触发 private on_select_all(selection: Array<any>) {} // 取消全选时触发 private on_select_all_cancel(selection: Array<any>) {}