当前位置: 代码迷 >> 综合 >> vue antd table行选中
  详细解决方案

vue antd table行选中

热度:44   发布时间:2023-11-29 13:50:17.0

a-table组件中加入以下两个属性 

:customRow="rowClick"
 :rowClassName="rowClassName" 

/**
* @Author: 
* @Date: 2019/8/22
* @Version: 1.0
* @Last Modified by: 
* @Last Modified time: 2019/8/22
**/
<comment># 组件注释租户应用授权
</comment>
<template><div class="pannel"><div class="pannel-title"><a-input-search placeholder="请输入租户名称/租户编码" v-model="params.other" @change="deb" ><a-button slot="enterButton" type="primary" v-waves>搜索</a-button></a-input-search></div><div class="pannel-content"><div class="table-box"><div class="table-table"><a-table:columns="table.columns":pagination="false":dataSource="table.data"size="middle":scroll="{x:300, y: table.height }":loading="table.loading":customRow="rowClick":rowClassName="rowClassName"rowKey="id"><template slot="name" slot-scope="text"><a href="javascript:;">{
   {text}}</a></template></a-table></div><div class="table-pagination"><Pagination:total="pagination.totalCount":pageSize="pagination.pageSize":current="pagination.pageNo"@onChange="onChangePage"@onShowSizeChange="onShowSizeChangePage"></Pagination></div></div></div></div>
</template>
<script>
import Pagination from "@/Pagination"; //分页组件
import debounce from 'lodash.debounce'
export default {name: "TenantAppLicense",components: {Pagination},props: {selected: {type: String,default: ''}},model: {// v-modelprop: "selected",event: "change"},data() {return {Util,api: {getTenantApi: Util.domainTenant + Util.portTenant + '/web/tenant-info/tenant-list'  // 获取租住列表},table: { // table 参数loading: false,height: null,id: null,columns: [ // 配置表头{title: "租户编码",dataIndex: "tenantCode",width: 150,},{title: "租户名称",width: 150,dataIndex: "name"}],data: []  // table 数据},pagination: { //分页参数pageNo: 1,pageSize: 10,totalCount: 0},params: {  // 请求参数current: 1,size: 10,other: undefined}};},computed: {},created() {},mounted() {//默认选中第一行// this.table.id = this.table.data[0]["id"];// this.rowClick(this.table.data[0]);// this.rowClassName(this.table.data[0]);},watch: {},methods: {/*** 监听input 执行debounce 延时1S后执行搜索方法*/deb: debounce(function () {// 搜索方法this.search()}, 1000  // 延迟时间),/*** 搜索*/search() {this.getDataAction()},//table行点击rowClick(record, index) {return {on: {click: () => {this.table.id = record.id;}}};},//table行classrowClassName(record, index) {let className = "";if (record.id == this.table.id) {className = "rowActive";this.is_check = true;this.$emit('change', this.table.id)}return className;},//加载右边的表格updateRightTable(id) {},/*** 删除权限* @param id*/},destroyed() {}
};
</script><style lang="scss">.rowActive{background:#ddd
}
</style>

  相关解决方案