表格点击详情

src/benyun/components/byTable/byTable.vue

@@ -51,7 +51,11 @@
           <template #default="{ row }">
             <slot v-if="item.slot" :name='item.field' :row='row'></slot>
             <component v-else-if="item.component" :is="item.component" :propConfig="item.compConfig" :propValue="row" />
-            <span v-else>{{ row[item.field] }}</span>
+            <template v-else>
+              <span v-if="item.isDetail" class="detail" @click="detail(row)">{{ row[item.field] }}</span>
+              <span v-else>{{ row[item.field] }}</span>
+            </template>
+            
           </template>
         </vxe-column>
     </template>
@@ -102,6 +106,7 @@
       component:''  //组件
       compConfig:{} //组件配置
       slot: true/false  //是否插槽
+      isDetail:true/false  //点击详情
       tree-node: true/false  //展开节点
     }],
     request:{}
@@ -144,6 +149,13 @@ export default class ByTable extends VueViews {
     })
   }
 
+  //点击详情
+  detail(row:any){
+    let data = (this as any).$lodash.cloneDeep(row);
+    delete data[this.key_id];
+    this.$emit('detail',data)
+  }
+
   setConfigAfter(){
     if(this.attrs.pageSize){
       this.page.pageSize = this.attrs.pageSize;
@@ -249,4 +261,8 @@ export default class ByTable extends VueViews {
   cursor: pointer;
   padding: 0 4px;
 }
+.detail{
+  color: #0089ff;
+  cursor: pointer;
+}
 </style>

src/views/demo/table.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="table">
-    <by-table :propConfig="config" ref="table">
+    <by-table :propConfig="config" ref="table" @detail="detail">
       <template v-slot:slotField='{ row }'>插槽：{{ row.name }}</template>
     </by-table>
     <el-button type="primary" @click="setData">设置数据</el-button>
@@ -30,6 +30,7 @@ export default class DemoTable extends Vue {
     {
       title:'姓名',
       field:'name',
+      isDetail:true,
       width:100
     },
     {
@@ -118,6 +119,9 @@ export default class DemoTable extends Vue {
   setData(){
     (this as any).$refs.table.setValue(this.data);
   }
+  detail(row:any){
+    console.log('该行详情',row);
+  }
   getSelect(){
     let data:Array<any>=(this as any).$refs.table.getSelectData();
     console.log('选中数据为：',data);