vue-easy-table的rowkey设置及行单选,以及清除共用表格的数据

地址:https://happy-coding-clans.github.io/vue-easytable/#/zh/doc/table/row-radio

 <ve-table
      style="width:100%"
      :columns="columns"
      :table-data="tableData"
      :radio-option="radioOption"
      row-key-field-name="rowKey" // rowkey为数据源的唯一值,后端给定,或者自己加上去。
    />
``
 tableData: [
          {
            rowKey: 1001,
            name: "John",
            date: "1900-05-20",
            hobby: "coding",
            address: "No.1 Century Avenue, Shanghai",
          },
          {
            rowKey: 1002,
            name: "Dickerson",
            date: "1910-06-20",
            hobby: "coding",
            address: "No.1 Century Avenue, Beijing",
          },
        ],
      };
  

```javascript
 columns: [
 // 三列数据,多一列是单选框,fiedl和title设置为空
          {
            field: "",
            key: "a",
            // type=radio
            type: "radio",
            title: "",
            width: 50,
            align: "center",
          },
          { field: "name", key: "b", title: "Name", width: 200, align: "left" },
          { field: "hobby", key: "c", title: "Hobby", width: 300, align: "left" },
          { field: "address", key: "d", title: "Address", width: "", align: "left" },

// 弹出弹框是,opentable(thisTable)里,
请求弹框表格数据
switch(thistable){
case 1: gettable(params){
}.then(res=>{
tableDate[1]=res.content.map(v=>{v,rowkey:i})
});breakl;
case 2: gettable(params){
}.then(res=>{
tableDate[2]=res.content.map(v=>{v,rowkey:i})
});breakl
// 确定或者取消,
查询数据清0;
tableDate[1]=【】
tableDate[2]=【】
tableDate[3]=【】

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值