<table>标签---自定义动态渲染

table组件

自定义动态渲染

      <Table
        border
        //列的内容
        :columns="roleColum"
        //数据
        :data="divisionData"
        //没有数据的时候显示的文字
        :no-data-text="noDataTips"
      ></Table>
divisionData:[], 
noDataTips:"暂无数据"   
roleColum: [
        {
          title: "下发",
            //多选框
          type: "selection",
          align: "center",
          width: 60,
          fixed: "left",
        },
        {
          title: "序号",
          type: "index",
          align: "center",
          width: 60,
          fixed: "left",
        }
        {
          title: "基本信息",
          align: "center",
    //children里面还可以包children
          children: [
            { title: "姓名", key: "name", width: 100, align: "center" },
 			children: [{}]
          ],
        },
            
        {
          title: "操作",
          align: "center",
          fixed: "right",
          width: 160,
      //自定义
          render: (h, params) => {
            let btnEdit = h(
              "Button",
              {
                props: {
                  type: "success",
                  size: "small",
                  icon: "md-checkmark",
                },
                style: {
                  marginTop: "5px",
                  marginRight: "5px",
                },
                on: {
                  click: () => {
                    this.handleEdit(params.row);
                  },
                },
              },
              "编辑"
            );
     //可以有多个,最后要reture出去
           return h("div", [btnDelete]);
          },
        },
      ],
<el-table ref="singleTable" :data="configs" border class="wraper-table" element-loading-text="Loading" fit highlight-current-row size="mini" style="margin: 0px 0 20px 0"> <el-table-column :label="$t('table.select')" width="50" align="center"> <template slot-scope="scope"> <el-radio v-model="radio" :label="scope.row.id" @change="chooseOne(scope.row)">{{ '' }}</el-radio> </template> </el-table-column> <el-table-column :label="$t('table.id')" align="center" width="50"> <template v-slot="scope"> {{ initTableIndex('page', scope.$index) }} </template> </el-table-column> <el-table-column :label="$t('i18nView.pdCode')" align="center" prop="pdCode"></el-table-column> <el-table-column :label="$t('i18nView.pdName')" align="center" prop="pdName"></el-table-column> <el-table-column :label="$t('customComponents.pdEdition')" align="center" prop="pdEdition"></el-table-column> <el-table-column :label="$t('pdtempPdInfoView.pdApplDate')" align="center" prop="pdApplDate" sortable></el-table-column> <el-table-column :label="$t('pdtempPdInfoView.updateTime')" align="center" prop="changeDate" sortable> <template v-slot="scope"><span v-if="scope.row.defType!=1">{{ scope.row.changeDate }}</span></template> </el-table-column> <el-table-column :label="$t('pdtempPdInfoView.definitionType')" align="center" prop="defType"> <template v-slot="scope">{{ scope.row.defType | filterDefType }}</template> </el-table-column> <el-table-column :filter-method="filterHandler" :filters="filterHandlerList1" :label="$t('pdtempPdInfoView.attributeDefinitionState')" align="center" prop="attrDefState"></el-table-column> <el-table-column :filter-method="filterHandler" :filters="filterHandlerList2" :label="$t('pdtempPdInfoView.structureDefinitionState')" align="center" prop="structDefState"></el-table-column> <el-table-column :filter-method="filterHandler" :filters="filterHandlerList3" :label="$t('pdtempPdInfoView.currentPriceDefinitionState')" align="center" prop="priceDefState"></el-table-column> <el-table-column :filter-method="filterHandler" :filters="filterHandlerList4" :label="$t('pdtempPdInfoView.superviseDefinitionState')" align="center" prop="superviseDefState"></el-table-column> </el-table> <!-- 分页 --> <cus-pagination ref="page" v-model="configs" :pageSize="10" :params="params" url="/pdtemp-pd-info/list"/>以上代码如何实现数据渲染
07-22
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值