赞
踩
注:开发环境vue2,ant版本1.7.8
ant版本不同api有所不同
需求:表头要显示红色星星,操作栏展示删除按钮
- <script>
- export default {
- data() {
- return {
- columns: [
- {
- dataIndex: 'value',
- slots: { title: 'titleValue' },//表头插槽
- scopedSlots: { customRender: 'value' },//表格内容插槽
- align: 'center',
- width: 240,
- {
- dataIndex: 'level',
- scopedSlots: { customRender: 'level' },
- slots: { title: 'titleLevel' },
- align: 'center'
- },
- {
- dataIndex: 'note',
- scopedSlots: { customRender: 'note' },
- slots: { title: 'titleNote' },
- align: 'center'
- },
- {
- title: '备注',
- dataIndex: 'market',
- scopedSlots: { customRender: 'market' },
- align: 'center'
- },
- {
- title: '操作',
- dataIndex: 'operation',
- scopedSlots: { customRender: 'operation' },
- align: 'center',
- width: 50
- }
- ]
- }
- }
- }
-
- </script>
- <template>
- <div>
-
- <a-table
- :rowKey="
- (record, index) => {
- return index
- }"
- :columns="columns"
- :data-source="form.editList"
- :pagination="false">
- <!-- 自定义表头-->
- <span slot="titleValue" class="form-table-heard">
- 分值区间
- </span>
- <span slot="titleLevel" class="form-table-heard">
- 评价等级
- </span>
- <span slot="titleNote" class="form-table-heard">
- 评价说明
- </span>
- <!--自定义内容-->
- <span slot="operation" slot-scope="text, record,index">
- <a-button name="删除" btnType="primary" :isDanger="true"
- @click="handleDelete(index)"/>
-
- </span>
- </a-table>
-
- </div>
- </template>
- <style lang="less" scoped>
- .form-table-heard:before {
- content: '*';
- color: red;
- }
-
- </style>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。