vue3对antdesign中多行表格的数据进行计算、合并展示_and-design table价格计算

---

使用情景：

vue3中对antdesign表格中的不同列进行属性计算。利用customRender的属性

---

一、Template

  <a-table :dataSource="portData" :columns="portColumns" :row-key="(record, index) => index" :pagination="pagination">
    <template v-for="col in ['admin_state', 'status', 'force_on']" 
        #[col]="{ record }"> {{ stateTrans(record[col]) }}
    </template>
        <template #action="{ record }">
          <a @click="handleClick(record, 'detail')">{{ t('app.sys.detail') }}</a>
        </template>
  </a-table>
1
2
3
4
5
6
7
8

二、JS

const portColumns = [
  {
    key: 'admin_state', fixed: 'left', title: t('app.poe.admin_state'),
    dataIndex: 'admin_state',
    customRender: function (text, record, index)
    {
      if (text.record.admin_state || text.record.force_on) {
        if (text.record.force_on === true) return 'Force_on'
        else return 'Enable'
      } else {
        return 'Disabled'
      }
    },
  },
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

三、效果

• 即在拿到数据时，渲染之前，对每条数据中需要操作的属性进行值得运算，得到需要的结果。
• 对每条数据中的admin_state和force_on属性进行运算，返回值作为dmin_state的列的值。