本节：在Ant design框架里面，自定以内容样式。
1.自定义表单内容 ，自定义样式。
ps:如果想自定义样式，又要循环数据，就用{{text}}循环出来
整个网页的代码：
<template><div><div style="margin: 16px 0px"><template><a-breadcrumb><a-breadcrumb-item><a href="">5G网络化推广公共服务平台</a></a-breadcrumb-item><a-breadcrumb-item><a href="">运营管理</a></a-breadcrumb-item><a-breadcrumb-item>评价管理</a-breadcrumb-item></a-breadcrumb></template></div><div class="out"><div class="top"><div class="bluePiece"></div><div class="blue5G"><div class="blue5GFont">5G应用场景</div></div><div class="interBuild"><div class="interBuildFont">网络建设模式</div></div><div class="blendBuild"><div class="blendBuildFont">融合应用方案</div></div></div><div class="line"></div><div class="newAdd"><div class="newAddBt"><!-- 新增按钮 --><div class="newAddBtFont" @click="showModalAdd">新增</div><a-modalv-if="dialogStatus == 'add'"v-model="visibleAdd"title="新增评价":confirm-loading="confirmLoading"cancelText="取消"ok-text="确认"@ok="handleOkAdd"@cancel="handleCancelAdd"><div style="display: flex"><div style="color: red">*</div><div>培训类型选择</div></div><div style="margin-top: 8px"><select name="" id="" class="btn"><option value="php">请选择培训类型</option><option value="java">java</option><option value="php">php</option></select></div><div class="zongHe">综合评分</div><div style="display: flex"><div class="star"><a-icon type="star" theme="filled" /></div><div class="star"><a-icon type="star" theme="filled" /></div><div class="star"><a-icon type="star" theme="filled" /></div><div class="star"><a-icon type="star" theme="filled" /></div><div class="star"><a-icon type="star" theme="filled" /></div></div><div><template><a-textarea class="wenBenYu" placeholder="请输入产品相关的使用感受，我们将会提供更好地服务" :rows="6" /></template></div></a-modal></div><div style="display: flex"><div class="inp"><template><a-input placeholder="请输入账户名/评论内容" /></template></div><div class="suos"><div class="suosFont">搜索</div></div><div class="chongZ"><div class="chongZFont">重置</div></div></div></div><div class="from"><template><a-table:columns="columns":data-source="data":row-selection="rowSelection":expanded-row-keys.sync="expandedRowKeys"@change="onChange"><span slot="tuiJ"><div v-if="showXingF" @click="fill"><a-icon type="star" theme="filled" /></div><div @click="ept" v-if="showXingO"><a-icon type="star" /></div></span><span slot="action"><div style="display: flex"><div class="check" @click="showModalAppraise">查看</div><div class="del" @click="showDeleteModal">删除</div></div></span></a-table><a-modalv-if="dialogStatus == 'delete'"title="警告":visible="visibleDel":confirm-loading="confirmLoading"cancelText="取消"okText="确定"@ok="hideModalDel"@cancel="handleDeleteCancel"><div style="display: flex"><div><img class="iconDel" src="../../assets/img/superise.png" alt="" /></div><div class="titleDel">若删除后，将不能恢复</div></div><div class="contentDel">删除为客户端和管理端全部删除。用户不可见自己发布过的内容，请慎重。</div></a-modal><a-modalv-model="visible"title="查看评价"style="font-weight: 800"@ok="handleOkAppraise"cancelText="取消"okText="确定"><div class="zongHe">综合评分</div><div style="display: flex"><div class="star"><a-icon type="star" theme="filled" /></div><div class="star"><a-icon type="star" theme="filled" /></div><div class="star"><a-icon type="star" theme="filled" /></div><div class="star"><a-icon type="star" theme="filled" /></div><div class="star"><a-icon type="star" theme="filled" /></div></div><div><template><a-textarea class="wenBenYu" placeholder="请输入产品相关的使用感受，我们将会提供更好地服务" :rows="6" /></template></div></a-modal></template><span class="quesIcon"><a-icon type="question-circle" /></span></div></div></div></template><script>import { search } from '@/api/manage'const columns = [{title: '序号',dataIndex: 'rank',key: 'rank'},{title: '评价账号',dataIndex: 'pingJiaZhangHao',key: 'pingJiaZhangHao'// width: '12%},{title: '推荐',dataIndex: 'tuiJ',width: '8%',scopedSlots: { customRender: 'tuiJ' },// slots: {// filterIcon: '@/public/images/checked.svg' // url地址//},filters: [{text: '酒店',value: '餐厅'},{text: '餐厅',value: '酒店'},{text: 'Submenu',value: 'Submenu',children: [{text: 'Green',value: 'Green'},{text: 'Black',value: 'Black'}]}]// specify the condition of filtering result// here is that finding the name started with `value`// onFilter: (value, record) => record.name.indexOf(value) === 0,// sorter: (a, b) => a.name.length - b.name.length,// sortDirections: ['descend']},{title: '评价内容',dataIndex: 'pingJianr',key: 'pingJianr',width: '18%'},// {// title: '评分',// dataIndex: 'age',// key: 'age'// // width: '12%'// },{title: '评分',dataIndex: 'pingF',defaultSortOrder: 'descend',sorter: (a, b) => a.pingF - b.pingF},{title: '评价时间',dataIndex: 'pingJiaTime',defaultSortOrder: 'descend',sorter: (a, b) => a.pingJiaTime - b.pingJiaTime},// {// title: '操作',// dataIndex: 'opt',// key: 'opt'// // scopedSlots: { customRender: 'tags' }// // width: '12%'// },{title: '操作',key: 'action',scopedSlots: { customRender: 'action' }}]const data = [{rank: '1',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 1,pingJiaTime: '/08/22 19 : 20'// opt: '查看 删除',// tuiJiang: '★'},{rank: '2',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 1,pingJiaTime: '/08/22 19 : 20'// opt: '查看 删除',// tuiJiang: '★'},{rank: '3',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 1,pingJiaTime: '/08/22 19 : 20',// opt: '查看 删除',tuiJiang: '★'},{rank: '4',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 1,// opt: '查看 删除',tuiJiang: '★'},{rank: '5',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 1,pingJiaTime: '/08/22 19 : 20',// opt: '查看 删除',tuiJiang: '★'},{rank: '6',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 10,// opt: '查看 删除',tuiJiang: '★'},{rank: '7',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 5,pingJiaTime: '/08/22 19 : 10',// opt: '查看 删除',tuiJiang: '★'},{rank: '8',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 1,pingJiaTime: '/08/22 19 : 00'// opt: '查看 删除',},{rank: '9',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 10,pingJiaTime: '/08/22 19 : 20'// opt: '查看 删除',},{rank: '10',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 5,pingJiaTime: '/08/22 19 : 20',// opt: '查看 删除',tuiJiang: '☆'},{rank: '11',pingJiaZhangHao: '账号名称',pingJianr: '评价内容评价内容评价内容评价内容',pingF: 5,pingJiaTime: '/08/22 19 : 20',// opt: '查看 删除',tuiJiang: '☆'}]const rowSelection = {onChange: (selectedRowKeys, selectedRows) => {console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)},onSelect: (record, selected, selectedRows) => {console.log(record, selected, selectedRows)},onSelectAll: (selected, selectedRows, changeRows) => {console.log(selected, selectedRows, changeRows)}}export default {data () {return {showXingF: true,showXingO: false,data,columns,sortedInfo: null,rowSelection,expandedRowKeys: [],visible: false,// 新增按钮ModalText: 'Content of the modal',confirmLoading: false,dialogStatus: '',visibleAdd: false,visibleDel: false}},created () {search({pageNo: '1',pageSize: '10',orderBy: '',orderByDirection: '',searchText: '',status1: '',status2: '',status3: '',type: '',recommend: ''}).then((res) => {console.log(res)})},methods: {showModalAdd () {this.visibleAdd = truethis.dialogStatus = 'add'},handleOkAdd (e) {console.log(e)this.visibleAdd = false},handleMenuClick (e) {console.log('click', e)},handleCancelAdd () {this.visibleAdd = falsethis.dialogStatus = ''console.log('Clicked cancel button')},success () {this.$message.success('已经成功推荐')},warning () {this.$message.warning('已经设为不推荐')},// 删除showDeleteModal () {this.dialogStatus = 'delete'this.visibleDel = true},handleDeleteCancel () {this.visibleDel = falsethis.dialogStatus = ''console.log('delete cancel')},hideModalDel () {this.visibleDel = trueconsole.log('delete ok')},fill () {this.showXingF = falsethis.showXingO = truethis.warning()},ept () {// 星星消失this.showXingF = truethis.showXingO = falsethis.success()},showModalAppraise () {this.visible = true},handleOkAppraise (e) {console.log(e)this.visible = false}// handleMenuClickAppraise (e) {// console.log('click', e)// }}}</script><style>.quesIcon {width: 12px;height: 12px;opacity: 1;position: absolute;margin-top: -642px;margin-left: 410px;/* position:fixed; */}.deleteButton {color: red;}.out {padding-left: 24px;width: 1650px;height: 1100px;opacity: 1;background: #ffffff;border-radius: 4px;box-shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.1);}.top {height: 36px;padding-top: 16px;width: 100%;display: flex;align-items: center;}.bluePiece {width: 3px;height: 16px;opacity: 1;background: #0848d6;border-radius: 3px;}.blue5G {width: 100px;height: 36px;opacity: 1;background: #0c3ca8;border-radius: 2px;margin-left: 17px;}.blue5GFont {width: 100px;height: 36px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: center;color: #ffffff;line-height: 36px;}.interBuild {width: 100px;height: 36px;opacity: 1;border: 1px solid hsl(222, 87%, 35%);border-radius: 3px;margin-left: 8px;}.interBuildFont {width: 100px;height: 36px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: center;color: #0c3ca8;line-height: 36px;}.blendBuild {width: 100px;height: 36px;opacity: 1;border: 1px solid #0c3ca8;border-radius: 3px;margin-left: 8px;}.blendBuildFont {width: 100px;height: 36px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: center;color: #0c3ca8;line-height: 36px;}.line {width: 1650px;height: 1px;opacity: 1;border: 1px solid #e4e4e4;margin-top: 16px;}.newAddBt {width: 100px;height: 36px;opacity: 1;background: #0c3ca8;border-radius: 4px;display: flex;}.newAddBtFont {width: 100px;height: 36px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: center;color: #ffffff;line-height: 36px;}.newAdd {margin-top: 16px;display: flex;justify-content: space-between;justify-items: center;}.inp {width: 230px;height: 36px;opacity: 0.4;/* border: 1px solid #bbbbbb; */border-radius: 5px;color: #bbbbbb;}.suos {width: 100px;height: 36px;opacity: 1;background: #0c3ca8;border-radius: 4px;margin-left: 8px;}.suosFont {width: 100px;height: 36px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: center;color: #ffffff;line-height: 36px;}.chongZ {width: 100px;height: 36px;opacity: 1;border: 1px solid #999999;border-radius: 5px;margin-left: 8px;margin-right: 24px;}.chongZFont {width: 100px;height: 36px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: center;color: #666666;line-height: 36px;}.from {margin-top: 24px;position: relative;}.check {width: 32px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: left;color: #5e7dc5;}.del {margin-left: 6px;width: 32px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: left;color: #e85936;}.wenBenYu {margin-top: 18px;width: 400px;height: 134px;opacity: 1;background: #ffffff;border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 3px;}.btn {width: 400px;height: 40px;opacity: 1;background: #ffffff;border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 3px;}.zongHe {margin-top: 16px;width: 56px;height: 24px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 800;text-align: left;line-height: 24px;}.star {width: 18px;height: 17px;opacity: 1;margin-top: 8px;}.jingG {font-weight: 800;width: 32px;height: 24px;opacity: 1;font-size: 16px;font-family: PingFangSC, PingFangSC-Medium;font-weight: 500;text-align: left;color: rgba(0, 0, 0, 0.85);line-height: 24px;}* {margin: 0px 0px;padding: 0px 0px;}.contentDel {margin-left: 48px;margin-top: 16px;width: 320px;height: 44px;opacity: 1;font-size: 14px;font-family: PingFangSC, PingFangSC-Regular;font-weight: 400;text-align: left;color: rgba(0, 0, 0, 0.65);line-height: 22px;}.titleDel {margin-left: 24px;width: 320px;height: 24px;opacity: 1;font-size: 16px;font-family: PingFangSC, PingFangSC-Medium;font-weight: 800;text-align: left;color: rgba(0, 0, 0, 0.85);line-height: 24px;}.iconDel {width: 21px;height: 21px;opacity: 1;/* background: #ff8f00; */}.wenBenYu {margin-top: 18px;width: 400px;height: 134px;opacity: 1;background: #ffffff;border: 1px solid rgba(0, 0, 0, 0.15);border-radius: 3px;}</style>
