增加table单选的受控事件 #3

Merged
juzi merged 1 commits from zjl into develop 2022-12-26 19:26:19 +08:00
3 changed files with 23 additions and 10 deletions
Showing only changes of commit d46bf70433 - Show all commits

14
package-lock.json generated
View File

@ -8,7 +8,7 @@
"name": "code-brick-wd", "name": "code-brick-wd",
"version": "0.1.0", "version": "0.1.0",
"dependencies": { "dependencies": {
"code-brick-zj": "^0.0.1", "code-brick-zj": "^0.0.4",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-ui": "^2.15.12", "element-ui": "^2.15.12",
"vue": "^2.6.14", "vue": "^2.6.14",
@ -4007,9 +4007,9 @@
} }
}, },
"node_modules/code-brick-zj": { "node_modules/code-brick-zj": {
"version": "0.0.1", "version": "0.0.4",
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.1.tgz", "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.4.tgz",
"integrity": "sha512-XLvQEoiVWESDirkMKVKCIdH1jW3drkSS472uMWd1m6Ul5UVTUAiJvBQ15kEo+L7w8Zt7cC5ErF+laYHhNeoaIA==" "integrity": "sha512-KSQ/drfIpoZKTrcARtuwG+6olde7fBYl+38Kialqa1NSoSDhPMqXTVw2N4KfA4MlucXQ/s3KZjfUsmKVZ70KkA=="
}, },
"node_modules/color-convert": { "node_modules/color-convert": {
"version": "1.9.3", "version": "1.9.3",
@ -14473,9 +14473,9 @@
} }
}, },
"code-brick-zj": { "code-brick-zj": {
"version": "0.0.1", "version": "0.0.4",
"resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.1.tgz", "resolved": "https://registry.npmjs.org/code-brick-zj/-/code-brick-zj-0.0.4.tgz",
"integrity": "sha512-XLvQEoiVWESDirkMKVKCIdH1jW3drkSS472uMWd1m6Ul5UVTUAiJvBQ15kEo+L7w8Zt7cC5ErF+laYHhNeoaIA==" "integrity": "sha512-KSQ/drfIpoZKTrcARtuwG+6olde7fBYl+38Kialqa1NSoSDhPMqXTVw2N4KfA4MlucXQ/s3KZjfUsmKVZ70KkA=="
}, },
"color-convert": { "color-convert": {
"version": "1.9.3", "version": "1.9.3",

View File

@ -8,7 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"code-brick-zj": "^0.0.1", "code-brick-zj": "^0.0.4",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"element-ui": "^2.15.12", "element-ui": "^2.15.12",
"vue": "^2.6.14", "vue": "^2.6.14",

View File

@ -318,7 +318,11 @@
</div> </div>
<div class="demo-box"> <div class="demo-box">
<h3>单选</h3> <h3>单选</h3>
<el-button size="small" @click="setCurrent(1)">选中第二行</el-button>
<el-button size="small" @click="setCurrent(-1)">取消选中</el-button>
<base-table <base-table
ref="palletTable1"
id="palletTable"
:table-props="tableProps" :table-props="tableProps"
:table-data="tableData" :table-data="tableData"
:page="1" :page="1"
@ -332,11 +336,16 @@
Table Table
组件提供了单选的支持只需要配置<code>highlight-current-row</code>属性即可实现单选 组件提供了单选的支持只需要配置<code>highlight-current-row</code>属性即可实现单选
之后由<code>current-change</code>事件来管理选中时触发的事件它会传入<code>currentRow</code><code>oldCurrentRow</code> 之后由<code>current-change</code>事件来管理选中时触发的事件它会传入<code>currentRow</code><code>oldCurrentRow</code>
使用按钮选中取消必须要传id,id的值是唯一的id的值需要和<code>setCurrent</code>中第一参数一样
</div> </div>
<div> <div>
<pre> <pre>
&lt;el-button size="small" @click="setCurrent(1)"&gt;选中第二行&lt;/el-button&gt;
&lt;el-button size="small" @click="setCurrent(-1)"&gt;取消选中&lt;/el-button&gt;
&lt;<span>template</span>&gt; &lt;<span>template</span>&gt;
&lt;base-table &lt;base-table
ref="palletTable1"
id="palletTable"
:table-props="tableProps" :table-props="tableProps"
:table-data="tableData" :table-data="tableData"
:page="1" :page="1"
@ -345,6 +354,10 @@
@current-change="handleCurrentChange" @current-change="handleCurrentChange"
/&gt; /&gt;
&lt;<span>/template</span>&gt; &lt;<span>/template</span>&gt;
methods:
setCurrent(index) {
this.$refs.palletTable1.setCurrent('palletTable', index)
}
</pre> </pre>
</div> </div>
</el-collapse-item> </el-collapse-item>
@ -1168,8 +1181,8 @@ export default {
} }
return '' return ''
}, },
setCurrent(row) { setCurrent(index) {
this.$refs.singleTable.setCurrentRow(this.tableData[row]) this.$refs.palletTable1.setCurrent('palletTable', index)
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
console.log(val) console.log(val)