小程序自定义表格组件

  
    
    
        
              删除
            
            
             
              <!-- 

                

            

                
{{ item.label }}
            
            
              

                

                  {{ item[context.tableDataprop] }}
                
              

              
合服务器托管网计
              
 
                 
                 
                  {{ calculateTotal(context.tableDataprop) }} 
                 
                 
                  
                 
              

                  
                    {{ calculateTotal(context.tableDataprop) }}
                  
                  
                  
                
               -->
            
        
    
  


export default {
  name:'TableVant',
  props:{
    bgcolor:{
      type: Object,
      default: {}
    },
    tableData:{
      type: Array,
      default: []
    },
    option:{
      type: Object,
      default: {}
    },
    onDelete: {
      type: Function,
      required: true
    },
    // 是否需要合计
    needTotal: {
      type: Boolean,
      default: false
    }
  },
  created() {},
  methods: {
    deleteItem(index) {
      // 在这里处理删除操作
      this.onDelete(index); // 触发传入的删除方法
    },
    // 求和
    calculateTotal(dataProp) {
      // 计算指定列数据的合计值
      let total = 0;
      for (let item of this.tableData) {
        total += parseFloat(item[dataProp]);
      }
      return total;
    }
  },
};




.table {
    width: 100%;
}
.head{
    height: 69rpx;
    display: flex;
    justify-content: space-around;
    background-color: #F6F7FA;
}
.th {
  height: 20rpx;
  line-height: 20rpx;
  /* background-color: rgba(246,247,250,1.000000); */
  color: rgba(65,64,64,1);
  font-size: 23rpx;
  font-family: SourceHanSansSC-Regular;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  line-height: 34rpx;
  padding: 20rpx 0;
}
.list-tr {
    height: 90rpx;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    border-bottom: 1rpx solid #E4E4E4;
}
.list-tr:nth-child(2n) {
  /*background-color: #33333b;*/
}
td {
    text-align: center;
    font-family: SourceHanSansSC, SourceHanSansSC;
    font-weight: 400;
    font-size: 23rpx;
    color: #414040;
    line-height: 90rpx;
    font-style: normal;
}
.van-swipe-cell__right{
  display: inline-block;
  width: 65rpx;
  height: 23px;
  margin-top: 20rpx;
  border-radius: 6rpx;
  /* padding: 10rpx; */
  font-size: 23rpx;
  line-height: 23px;
  color: #fff;
  text-align: center;
  background-color: #f44;
}
.total-row{
  background:#F6F7FA ;
  height: 69rpx;
  display: flex;
  justify-content: space-around;
}
.total-td{
  position: absolute;
  left: 30rpx;
}

外部组件引用

    
      
          
          
          股东结构
          
          
          
            
          
      
      
        保存
      
      
        
      
    
  
  
  
  import AddStructure from '../components/add-gdStructure.vue'
  import VantTable from '../../components/table.vue'
  export default {
    components:{
      AddStructure,
      VantTable,
    },
    data() {
      return {
        isExpanded:false,
        isNeedTotal:true,
        option: {
          column: [
              {
              label: '股东名称',
              tableDataprop: 'shareholder_name',
              needTotal:false,
              },
              {
              label: '持股比例(%)',
              tableDataprop: 'shareholding_ratio',
              needTotal:true,
              },
              {
              label: '认缴金额(万元)',
              tableDataprop: 'subscription_capital',
              needTotal:true,
              },
              {
              label: '实缴金额(万元)',
              tableDataprop: 'paid_in_capital',
              needTotal:true,
              },
              {
              label: '出资方式',
              tableDataprop: 'capital_contribution_type',
              needTotal:false,
     服务器托管网         }
          ]
        },
        dataForm: {
          operationId: '',
          creationMonth: '',
          industry: '',
          industryName: '',
          productType: '',
          productTypeName: '',
          productStatus: '',
          cowMaxScale: '',
          beefCattleNums: [
          ],
          deposit1:'',
          deposit2:'',
          deposit3:''
        },
        selectedTypeIndex:-1,
        typeList:[{"dictValue":"货币","dictCode":"货币"},{"dictValue":"实物","dictCode":"票据贴现"},{"dictValue":"知识产权","dictCode":"知识产权"}],
      }
    },
    methods: {
      onTypePickerChange(e,params) {
				const index = e.detail.value
				if (index === this.selectedTypeIndex) return
				  this.selectedTypeIndex = index
          console.log(this.typeList[0]);
          console.log(this.typeList[index],'this.typeList[index]');
          this.dataForm.beefCattleNums[params].fatCalfNum2 = this.typeList[index].dictValue;
			},
      addInventory(){
        console.log(1222);
        this.$refs.inventoryPopup.open()
      },
      addInventoryHandle(data){
        this.$refs.inventoryPopup.close()
        this.dataForm.beefCattleNums.push(Object.assign({}, data))
      },
      closeInventoryHandle(){
        this.$refs.inventoryPopup.close()
      },
      // 删除操作
      async stockDelHandle(index) {
        uni.showModal({
          title: '提示',
          content: '确认是否删除当前数据项？',
          confirmText: '确定',
          cancelText: '取消',
          confirmColor: '#35AB3B',
          success: async result => {
            if (result.confirm) {
              // uni.showLoading({
              //   title: '加载中...',
              //   mask: true
              // })
              // const [err, res] = await stockDel({
              //   id
              // })
              // uni.hideLoading()
              // if (err) return
              // if (res.code !== 0) {
              //   return uni.showToast({
              //     title: res.msg || '操作失败！',
              //     icon: 'none'
              //   })
              // }
              // this.getInfo(true)
              this.dataForm.beefCattleNums.splice(index,1)
            } else if (result.cancel) {
                console.log('用户点击取消')
            }
          }
        })
      },
      toggleTable() {
        this.isExpanded = !this.isExpanded;
      },
      // 保存
      submitHandle(){
        console.log('保存成功！')
      },
    }
  }
  
  
  
     @import "../../../../../static/css/add_tcpublic.scss";

  
  

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: AI人工智能小程序系统开发

开发AI人工智能小程序系统需要以下步骤： 1. 确定需求：了解客户对人工智能小程序的期望，并分析系统的实际应用场景。 2. 设计架构：选择合适的技术框架和人工智能算法，进行小程序系统架构的设计。 3. 数据采集和处理：收集必要的数据，并进行预处理和特征提取，为…