iView 在Vue中使用遇到的问题
一、Tree 树形控件
问题:
树形控件在参照官方最后一个自定义render例子时,无法对树节点进行选中
return h( "span", { style: { display: "inline-block", cursor: "pointer", color: node.node.selected ? "#2d8cf0" : "#fff" //根据选中状态设置样式 }, on: { click: () => { if (!node.node.selected) this.$refs.tree.handleSelect(node.nodeKey); //手动选择树节点 } } },
二、Table 表格 结合 Page 分页
问题:
在表格使用多选框时,分页切换后,上一页的选中状态无法保存。
解决方案:
定义一个存储所有选中的数组this.selectRow = [],选中状态发生变化时,向数组中增删选中目标。
在翻页事件中,加入下面的代码:
//翻页事件 changePage(page) { this.currentPage = page; this.tableData.map(row => { //判断是否在选中列表中 f['_checked'] = $.inArray(row.name,this.selectRow) != -1; }) }
三、Table 表格 自定义选择框、输入框
效果图:
示例代码:
<template> <Table ref="fieldTable" :loading="fieldLoading" :columns="fieldColumns" :data="fieldTableData" @on-select="tableSelect" @on-select-cancel="tableSelectCancel" @on-select-all="tableSelectAll" @on-select-all-cancel="tableSelectAllCancel" ></Table> </template> <script> export default { data() { return { fieldColumns: [], fieldTableData: [], fieldColumns: [ { type: "selection", width: 60, align: "center" }, { title: "发布字段", key: "publish", align: "center", //渲染为勾选框 render: (h, params) => { return h("div", [ h("Checkbox", { props: { value: params.row.publish }, on: { "on-change": data => { this.fieldTableData[params.row.index].publish = data; this.fieldTableData[params.row.index]["_checked"] = true; } } }) ]); } }, { title: "字段名称", key: "name", width: 120 }, { title: "字段重命名", key: "new_name", align: "center", width: 120, //渲染为输入框 render: (h, params) => { return h("div", [ h("Input", { props: { value: params.row.new_name }, on: { "on-blur": event => { this.fieldTableData[params.row.index].new_name = event.target.value; this.fieldTableData[params.row.index]["_checked"] = true; } } }) ]); } }, { title: SELAN.type || "类型", key: "type", align: "center" }, { title: SELAN.length || "长度", key: "length", align: "center" } ] }; }, methods: { //单行选择 tableSelect(selection, row) { this.fieldTableData[row.index]["_checked"] = true; this.fieldTableData[row.index].publish = false; }, //单行取消选择 tableSelectCancel(selection, row) { this.fieldTableData[row.index]["_checked"] = false; this.fieldTableData[row.index].publish = false; }, //全选 tableSelectAll(selection) { this.fieldTableData.map(s => { s["_checked"] = true; }); }, //取消全选 tableSelectAllCancel(selection) { this.fieldTableData.map(s => { s["_checked"] = false; s.publish = false; }); } } }; </script>