vic-table
v0.1.2
Published
using element ui, the table.
Downloads
2
Readme
vic-table
说明
项目基于vue和element-ui，所以必须在您使用的项目总入口优先导入element-ui才能使用。
别问我为什么写这个项目，我不想码代码，最多写一个对象传递进去，能达到我的目的就可以了，不能再多了，我要节省时间玩游戏享受人生...
我在这个项目里面码那么多字是因为我很多次自己都已经忘记了我对象的结构是怎样的，所以写详细点自己能在以后使用的时候更快回想起来这个祖传代码是怎么用的而不至于总是骂自己。
项目安装
yarn add vic-table
参数详解
- vdata对象顶级参数，除开以下列出的参数，Element的Table组件的属性值都可以配置在此处，具体参考Element的Table组件
| 参数名 | 必填 | 类型 | 默认值 | 备注 | | ------------- | ----- | ------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | id | true | String | 'VicTable' | 表格的ref命名，使用这个命名才能调用表格的方法 | | fields | true | Array | [] | 表格列设置 | | data | true | Array | [] | 表格数据，使用items|datas|data均可用，但是只要设置其中一个，否则匹配按这个顺序来 | | loading | false | Boolean | false | 表格刷新中标记 | | tableSelect | false | Boolean | false | 是否可勾选表格 | | rowIndexShow | false | Boolean | false | 是否显示序号 | | rowIndexLabel | false | String | 空 | 序号列表头显示文字 | | rowIndexWidth | false | String | 空 | 序号列宽度，如：80px或者100px | | rowExpandShow | false | Boolean | false | 是否展开表格 | | delTag | false | String | 'deleteTime' | 数据有效性字段（服务器上数据软删除的字段） | | delDesc | false | Boolean | false | 数据有效性字段是否取反 | | urlPrefix | false | String | 空 | 表格内图片url地址的前缀，会自动根据图片的地址前缀是否带http和https链接前缀字符串，如果带了链接则不会添加前缀 | | imageWidth | false | String | '120px' | 表格内单个图片展示的宽度 | | imageHeight | false | String | '60px' | 表格内单个图片展示的高度 | | opt | false | Boolean | true | 是否显示表格操作按钮 | | hideBtn | false | Object | { edit: false, copy:false, read:false, delete:false, enable:false } | 隐藏按钮设置，哪个操作按钮需要隐藏则单独设置该按钮为true即可，其他的可以不设置 | | optBtn | false | Object | { edit: { type: 'primary', class: 'primary', text: 'Edit' }, copy:{ type: 'warning', class: 'warning', text: 'Copy' }, read:{ type: '', class: '', text: 'Read' }, delete:{ type: 'danger', class: 'danger', text: 'Delete' }, enable:{ type: 'success', class: 'success', text: 'Enable' }} | 按钮，可单独只设置某一个按钮的设置，如果除开系统默认设置的这5个按钮无法满足要求，可在optBtn下增加customBtn字段，添加多个按钮 | | ... | false | 未知 | 空 | 参考Element的Table组件的属性值 |
所有表格的事件也直接在vdata属性字段中直接编写，所有表格的方法需要使用ref绑定之后使用vue的ref的对象属性去调用表格的方法
vdata.fields属性是表格的列设置，属性字段参考Element-Table组件中的Table-column属性； 新增了vtype属性，可按此属性设置表格字段为Tag|Switch|Icon|Image|Images|A链接； 其tag和switch的点击事件由该列的href、text和change字段映射动作； 新增了expand和hide属性，可设置列在展开信息中进行展示和在默认表格展示中进行列的隐藏；
vdata.optBtn.customBtn属性是表格的自定义按钮设置，默认按钮的属性除开isCustomBtn属性，其他参数均可设置 新增了sort属性进行按钮排序，增加show属性进行按钮是否显示的手动判断
| 参数名 | 必填 | 类型 | 默认值 | 备注 | | ----------- | ----- | -------- | ------ | -------------------------------------------- | | isCustomBtn | true | Boolean | false | 只有设置该字段为true，自定义按钮才会显示出来 | | text | true | String | 空 | 按钮文字 | | type | false | String | 空 | 参考Element的按钮type属性 | | class | false | String | 空 | 按钮的class属性 | | icon | false | String | 空 | 按钮文字左侧的图标 | | click | false | Function | 空 | 按钮的点击事件 | | sort | false | Number | 空 | 按钮的排序 | | show | false | Function | 空 | 按钮的显示函数(button, key, item, index) | | ... | false | 未知 | 空 | 参考Element的Button组件的属性值 |
使用范例
- 基础调用，不使用按钮，只用表格展示数据
<template>
<div id="demo-base">
<el-button @click="refreshTable"> Refresh Table </el-button>
<br />
<br />
<VicTable
:vdata="vdata"
ref="vicTable"
/>
</div>
</template>
<script>
import VicTable from 'vic-table'
export default {
name: 'Demo1',
components: {
VicTable
},
data() {
return {
showTable: false,
vdata: {
id: 'vicTable1',
stripe: true, // 斑马条纹
border: true, // 表格边框
fields: [ // 表格列数据
// { prop: 'id', label: 'ID', sortable: false, width: 80 },
{ prop: 'companyText', label: '所属机构', sortable: false, fixed: true },
{ prop: 'pidText', label: '上级', sortable: false },
{ prop: 'rolesText', label: '角色', sortable: false },
{ prop: 'image', label: '头像', sortable: false },
{ prop: 'username', label: '用户名', sortable: true },
{ prop: 'truename', label: '真实姓名', sortable: true },
{ prop: 'nickname', label: '昵称', sortable: true },
{ prop: 'phone', label: '手机号码', sortable: false }
],
opt: false, // 其实如果fields中不存在operation的列，那么opt不设置为false也是不会显示操作按钮的
datas: [ // 表格数据字段（items|datas|data）
{ id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', phone: '110', deleteTime: '2000-01-01 00:00:00', deleteSate: null },
{ id: 102, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', phone: '119', deleteTime: null, deleteSate: '2000-01-01 00:00:00' }
]
}
}
},
methods: {
refreshTable: function () {
// this.showTable = !this.showTable
this.$set(this.vdata, 'loading', true)
setTimeout(() => {
this.$set(this.vdata, 'loading', false)
}, 2000)
}
}
}
</script>
<style>
</style>
- 使用默认按钮的表格
<template>
<div id="demo-base">
<el-button @click="refreshTable"> Refresh Table </el-button>
<br />
<br />
<VicTable
:vdata="vdata"
ref="vicTable"
@editModalEvent="editModalEvent"
@copyModalEvent="copyModalEvent"
@readModalEvent="readModalEvent"
@deleteModalEvent="deleteModalEvent"
@enableModalEvent="enableModalEvent"
/>
</div>
</template>
<script>
import VicTable from 'vic-table'
export default {
name: 'Demo2',
components: {
VicTable
},
data() {
return {
showTable: false,
vdata: {
id: 'vicTable2',
stripe: true, // 斑马条纹
border: true, // 表格边框
fields: [ // 表格列数据
// { prop: 'id', label: 'ID', sortable: false, width: 80 },
{ prop: 'companyText', label: '所属机构', sortable: false, fixed: true },
{ prop: 'pidText', label: '上级', sortable: false },
{ prop: 'rolesText', label: '角色', sortable: false },
{ prop: 'image', label: '头像', sortable: false },
{ prop: 'username', label: '用户名', sortable: true },
{ prop: 'truename', label: '真实姓名', sortable: true },
{ prop: 'nickname', label: '昵称', sortable: true },
{ prop: 'phone', label: '手机号码', sortable: false },
{ prop: 'operation', label: '操作', sortable: false, width: '420px' }
],
datas: [ // 表格数据字段（items|datas|data）
{ id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', phone: '110', deleteTime: '2000-01-01 00:00:00', deleteSate: null },
{ id: 102, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', phone: '119', deleteTime: null, deleteSate: '2000-01-01 00:00:00' }
]
}
}
},
methods: {
refreshTable: function () {
// this.showTable = !this.showTable
this.$set(this.vdata, 'loading', true)
setTimeout(() => {
this.$set(this.vdata, 'loading', false)
}, 2000)
},
editModalEvent: function (item, index, button) {
console.log(`editModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
copyModalEvent: function (item, index, button) {
console.log(`copyModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
readModalEvent: function (item, index, button) {
console.log(`readModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
deleteModalEvent: function (item, index, button) {
console.log(`deleteModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
enableModalEvent: function (item, index, button) {
console.log(`enableModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
}
}
}
</script>
<style>
</style>- 修改表格默认按钮+绑定表格事件+表格方法调用示例
<template>
<div id="demo-base">
<el-button @click="refreshTable"> Refresh Table </el-button>
<el-button @click="clearSelected"> Clear Selected </el-button>
<br />
<br />
<VicTable
:vdata="vdata"
ref="vicTable"
@editModalEvent="editModalEvent"
@copyModalEvent="copyModalEvent"
@readModalEvent="readModalEvent"
@deleteModalEvent="deleteModalEvent"
@enableModalEvent="enableModalEvent"
/>
</div>
</template>
<script>
import VicTable from 'vic-table'
export default {
name: 'Demo3',
components: {
VicTable
},
data() {
return {
showTable: false,
vdata: {
id: 'vicTable3',
tableSelect: true, // 是否可勾选表格
stripe: true, // 斑马条纹
border: true, // 表格边框
showSummary: true, // 表尾合计
rowClassName: ({row, rowIndex}) => { // 表格行状态显示
return this.tableRowClassName(row, rowIndex)
},
selectionChange: (val) => {
console.log(`selectionChange => `)
console.log(val)
this.selectedTableEvent(val)
},
// defaultSort: { prop: "truename", order: "desc" },
fields: [ // 表格列数据
// { prop: 'id', label: 'ID', sortable: false, width: 80 },
{ prop: 'companyText', label: '所属机构', sortable: false, fixed: true },
{ prop: 'pidText', label: '上级', sortable: false },
{ prop: 'rolesText', label: '角色', sortable: false },
{ prop: 'image', label: '头像', sortable: false },
{ prop: 'username', label: '用户名', sortable: true },
{ prop: 'truename', label: '真实姓名', sortable: true },
{ prop: 'nickname', label: '昵称', sortable: true },
{ prop: 'phone', label: '手机号码', sortable: false },
{ prop: 'operation', label: '操作', sortable: false, width: '420px' }
],
datas: [ // 表格数据字段（items|datas|data）
{ id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', phone: '110', deleteTime: '2000-01-01 00:00:00', deleteSate: null },
{ id: 102, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', phone: '119', deleteTime: null, deleteSate: '2000-01-01 00:00:00' }
],
optBtn: {
edit: { icon: 'el-icon-edit', text: '编辑' },
copy: { icon: 'el-icon-document-copy', text: '复制' },
read: { icon: 'el-icon-tickets', text: '读取' },
delete: { icon: 'el-icon-delete', text: '停用' },
enable: { icon: 'el-icon-check', text: '启用' }
}
}
}
},
methods: {
refreshTable: function () {
// this.showTable = !this.showTable
this.$set(this.vdata, 'loading', true)
setTimeout(() => {
this.$set(this.vdata, 'loading', false)
}, 2000)
},
editModalEvent: function (item, index, button) {
console.log(`editModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
copyModalEvent: function (item, index, button) {
console.log(`copyModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
readModalEvent: function (item, index, button) {
console.log(`readModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
deleteModalEvent: function (item, index, button) {
console.log(`deleteModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
enableModalEvent: function (item, index, button) {
console.log(`enableModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
selectedTableEvent: function (val) {
console.log(`selectedTableEvent => `)
console.log(val)
},
// 表格行状态显示
tableRowClassName: function (row, rowIndex) {
if (row.deleteTime) {
return 'warning-row'
} else {
return ''
}
},
clearSelected: function () {
console.log(`clearSelected => `)
console.log(this.$refs['vicTable'])
console.log(this.$refs['vicTable'].$refs['vicTable3'])
this.$refs['vicTable'].$refs['vicTable3'].clearSelection()
// this.$refs['vicTable']
}
}
}
</script>
<style>
.el-table .warning-row {
background: #FDE2E2;
}
</style>
- 自定义表格按钮的示例(新增了多种字段类型和按钮排序)
<template>
<div id="demo-base">
<el-button @click="refreshTable"> Refresh Table </el-button>
<br />
<br />
<VicTable
:vdata="vdata"
ref="vicTable"
@editModalEvent="editModalEvent"
@copyModalEvent="copyModalEvent"
@readModalEvent="readModalEvent"
@deleteModalEvent="deleteModalEvent"
@enableModalEvent="enableModalEvent"
/>
</div>
</template>
<script>
import VicTable from '../components/VicTable.vue'
export default {
name: 'Demo4',
components: {
VicTable
},
data() {
return {
showTable: false,
vdata: {
id: 'vicTable4',
stripe: true, // 斑马条纹
border: true, // 表格边框
rowIndexShow: true, // 是否显示序号
rowIndexLabel: '#', // 序号列表头显示文字
rowIndexWidth: '80px', // 序号列宽度
delTag: 'deleteTime', // 数据有效性字段（服务器上数据软删除的字段）
delDesc: true, // 数据有效性字段是否取反（）
urlPrefix: '', // 表格内图片url地址的前缀，
imageWidth: '120px', // 表格内单个图片展示的宽度，
imageHeight: '60px', // 表格内单个图片展示的高度，
// defaultSort: { prop: "truename", order: "desc" },
fields: [ // 表格列数据
// { prop: 'id', label: 'ID', sortable: false, width: 80 },
{ prop: 'companyText', label: '所属机构', sortable: false },
{ prop: 'pidText', label: '上级', sortable: false },
{ prop: 'rolesText', label: '角色', type: 'tag', datas: { '最高管理员': 'success', '管理员': 'warning' }, sortable: false },
{ prop: 'image', label: '头像2', type: 'image', sortable: false },
{ prop: 'username', label: '用户名', sortable: true },
{ prop: 'truename', label: '真实姓名', sortable: true },
{ prop: 'nickname2', label: '昵称头像', type: 'icon', datas: { '剑魔': 'el-icon-s-custom', '教主': 'el-icon-s-flag' }, sortable: false },
{ prop: 'nickname', label: '昵称', sortable: true },
{ prop: 'phone', label: '手机号码', sortable: false },
{ prop: 'linkA', label: '链接A', type: 'a', href: (row, index) => { return this.autoA(row, index) }, sortable: false },
{ prop: 'linkB', label: '链接B', type: 'a', href: (row, index) => { return this.autoB(row, index) }, text: (row, index) => { return this.autoText(row, index) }, sortable: false },
{ prop: 'sex', label: '性别', type: 'switch', change: (row, index, button) => { this.switchAction(row, index, button) }, sortable: false },
{ prop: 'deleteTime', label: '删除时间', sortable: false },
{ prop: 'operation', label: '操作', sortable: false, width: '600px' }
],
datas: [ // 表格数据字段（items|datas|data）
{ id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', nickname2: '剑魔', linkA: '剑魔', phone: '110', deleteTime: '2000-01-01 00:00:00', deleteSate: null, sex: true },
{ id: 102, companyText: '总公司', pidText: '无', rolesText: '管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', nickname2: '教主', linkA: '教主', phone: '119', deleteTime: null, deleteSate: '2000-01-01 00:00:00', sex: false },
{ id: 103, companyText: '总公司', pidText: '无', rolesText: '专员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '专员1', truename: '向问天', nickname: '天王老子', nickname2: '天王老子', linkA: '天王老子', phone: '120', deleteTime: null, deleteSate: '2000-01-01 00:00:00', sex: false }
],
optBtn: {
edit: { icon: 'el-icon-edit', text: '编辑', sort: 5 },
copy: { icon: 'el-icon-document-copy', text: '复制', sort: 4 },
read: { icon: 'el-icon-tickets', text: '读取', sort: 3, show: (button, key, item, index) => { return this.showBtn(button, key, item, index) } },
delete: { icon: 'el-icon-delete', text: '停用', sort: 2, show: (button, key, item, index) => { return this.showDeleteBtn(button, key, item, index) } },
enable: { icon: 'el-icon-check', text: '启用', sort: 2, show: (button, key, item, index) => { return this.showEnableBtn(button, key, item, index) } },
customBtn: { // 自定义按钮
btn1: {
isCustomBtn: true, // 设置为自定义按钮才能正常显示出来
type: 'info', // 按钮的类型，同element-ui的按钮type
icon: '', // 按钮的icon图标
class: 'info', // 按钮的class样式
text: 'Btn1', // 按钮显示的文字
sort: 1,
click: (item, index, button) => { // 按钮的点击事件动作
this.clickBtn1(item, index, button)
}
},
btn2: {
isCustomBtn: true,
// type: 'danger',
// icon: '',
// class: 'danger',
text: 'Btn2',
sort: 0,
click: (item, index, button) => {
this.clickBtn2(item, index, button)
}
}
}
}
}
}
},
methods: {
refreshTable: function () {
// this.showTable = !this.showTable
this.$set(this.vdata, 'loading', true)
setTimeout(() => {
this.$set(this.vdata, 'loading', false)
}, 2000)
},
editModalEvent: function (item, index, button) {
console.log(`editModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
copyModalEvent: function (item, index, button) {
console.log(`copyModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
readModalEvent: function (item, index, button) {
console.log(`readModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
deleteModalEvent: function (item, index, button) {
console.log(`deleteModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
enableModalEvent: function (item, index, button) {
console.log(`enableModalEvent => `)
console.log(item)
console.log(index)
console.log(button)
},
clickBtn1: function (item, index, button) {
console.log(`click btn1`)
console.log(item)
console.log(index)
console.log(button)
},
clickBtn2: function (item, index, button) {
console.log(`click btn2`)
console.log(item)
console.log(index)
console.log(button)
},
switchAction: function (item, index, button) {
console.log(`switchAction`)
console.log(item)
console.log(index)
console.log(button)
},
autoA: function (row, index) {
return typeof row.image === 'object' ? row.image[0] : row.image
},
autoB: function (row, index) {
return `news/${row.id}`
},
autoText: function (row, index) {
return `查看${row.rolesText}`
},
showBtn: function (button, key, item, index) {
let result = true
if (index === 1 || item.id === 103) {
result = false
}
return result
},
showDeleteBtn: function (button, key, item, index) {
let result = false
if (item.deleteTime === null) {
result = true
} else {
result = false
}
if (index === 1) {
result = false
}
return result
},
showEnableBtn: function (button, key, item, index) {
let result = false
if (item.deleteTime === null) {
result = false
} else {
result = true
}
if (index === 1 || item.id === 103) {
result = true
}
return result
}
}
}
</script>
<style>
</style>
- 表格展开的示例(新增了展开标记和列隐藏标记)
<template>
<div id="demo-base">
<el-button @click="refreshTable"> Refresh Table </el-button>
<br />
<br />
<VicTable
:vdata="vdata"
ref="vicTable"
/>
</div>
</template>
<script>
import VicTable from '../components/VicTable.vue'
export default {
name: 'Demo1',
components: {
VicTable
},
data() {
return {
showTable: false,
vdata: {
id: 'vicTable5',
stripe: true, // 斑马条纹
border: true, // 表格边框
tableSelect: true, // 是否可勾选表格
rowIndexShow: true, // 表格序号
rowExpandShow: true, // 表格展开 -- 新增标记
expandClass: 'vic-table-expand', // 表格展开列的class类名
fields: [ // 表格列数据
// { prop: 'id', label: 'ID', sortable: false, width: 80 },
{ prop: 'companyText', label: '所属机构', expand: true, sortable: false, fixed: true },
{ prop: 'pidText', label: '上级', expand: true, sortable: false },
{ prop: 'rolesText', label: '角色', expand: true, sortable: false },
{ prop: 'image', label: '头像', sortable: false },
{ prop: 'username', label: '用户名', expand: true, sortable: true },
{ prop: 'truename', label: '真实姓名', expand: true, sortable: true },
{ prop: 'nickname', label: '昵称', expand: true, sortable: true },
{ prop: 'phone', label: '手机号码', expand: true, sortable: false },
{ prop: 'updateTime', label: '更新时间', expand: true, hide: true }, // 新增expand标记和hide标记
{ prop: 'deleteTime', label: '删除时间', expand: true, hide: true } // 新增expand标记和hide标记
],
opt: false, // 其实如果fields中不存在operation的列，那么opt不设置为false也是不会显示操作按钮的
datas: [ // 表格数据字段（items|datas|data）
// { id: 1, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=4', username: '管理员', truename: '西方求败', nickname: '剑魔', phone: '110' }
{ id: 101, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: ['https://avatars.githubusercontent.com/u/48981783?v=3', 'https://avatars.githubusercontent.com/u/48981783?v=4'], username: '管理员1', truename: '西方求败', nickname: '剑魔', phone: '110', updateTime: '2024-01-01 00:00:00', deleteTime: '2024-03-08 00:00:00', deleteSate: null },
{ id: 102, companyText: '总公司', pidText: '无', rolesText: '最高管理员', image: 'https://avatars.githubusercontent.com/u/48981783?v=5', username: '管理员2', truename: '东方不败', nickname: '教主', phone: '119', updateTime: '2024-02-02 00:00:00', deleteTime: null, deleteSate: '2024-03-10 00:00:00' }
]
}
}
},
methods: {
refreshTable: function () {
// this.showTable = !this.showTable
this.$set(this.vdata, 'loading', true)
setTimeout(() => {
this.$set(this.vdata, 'loading', false)
}, 2000)
}
}
}
</script>
<style>
.vic-table-expand {
font-size: 0;
}
.vic-table-expand label {
width: 120px;
color: #99a9bf;
font-size: 12px;
line-height: 20px;
}
.vic-table-expand .el-form-item {
margin-right: 0;
margin-bottom: 0;
width: 30%;
line-height: 20px;
}
.vic-table-expand .el-form-item__content {
font-size: 12px;
line-height: 20px;
}
</style>