radio&&radioGroup
- radioGroup
<template>
<div>
<!-- 单选 -->
<a-radio :value="isTrue" @change="change1">确定</a-radio><br />
<!-- 单选组 -->
<a-radio-group
name="radioGroup"
:default-value="1"
@change="change"
:options="options"
>
<a-radio v-for="(item, index) in options" :key="index" :value="value">
</a-radio>
</a-radio-group>
</div>
</template>
<script>
import options from './options.json'
// const options=[
// {
// "label": "是",
// "value": 1
// },
// {
// "label": "否",
// "value": 2
// },
// {
// "label": "是也不是",
// "value": 3
// }
// ]
export default {
data () {
return {
options: options,
value: '',
isTrue: 1
}
},
methods: {
change1 (e) {
window.console.log(e)
window.console.log(this.isTrue === e.target.value)
},
change (e) {
window.console.log(e)
console.log(e.target.value)
this.value = 'aaaa'
window.console.log(this.value)
}
}
}
</script>
<style></style>
- 导入json(json中的字段需用双引号)
import options from './options.json'
table
<template>
<div>
<a-button type="primary" @click="add">
新增
</a-button>
<a-button @click="del">
删除
</a-button>
<a-table
v-if="bol"
:columns="columns"
:data-source="data"
bordered
:pagination="false"
:row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange
}"
>
<span slot-scope="text" slot="age">
{{ text > 18 ? '成年' : '未成年' }}
</span>
<span slot="action" slot-scope="text, record">
<a @click="edit(record)">编辑</a>
<a-popconfirm title="确认删除?" @confirm="() => sysAppDelete(text)">
<a>删除</a>
</a-popconfirm>
</span>
</a-table>
</div>
</template>
<script>
// columns数组中的每个对象的属性dataIndex对应:data-source数组中对象的属性名就可以实现渲染
const data = []
for (let i = 1; i < 4; i++) {
data.push({
key: i,
name: `小明${i}`,
age: 32,
gender: 1,
tel: '0571-22098909',
address: 'New York No. 1 Lake Park'
})
}
export default {
data () {
return {
columns: [
{
title: '姓名',
align: 'center',
dataIndex: 'name'
},
{
title: '是否成年',
align: 'center',
dataIndex: 'age',
scopedSlots: { customRender: 'age' }
},
{
title: '电话',
align: 'center',
dataIndex: 'tel'
},
{
title: '地址',
align: 'center',
dataIndex: 'address'
},
{
title: '性别',
align: 'center',
dataIndex: 'gender',
customRender: text => {
if (text == 1) {
// 前4行数据以a标签的形式被渲染
return <span>男</span>
}
}
},
{
title: '操作',
align: 'center',
scopedSlots: { customRender: 'action' }
}
],
data,
selectedRowKeys: [],
bol: true
}
},
methods: {
onSelectChange (selectedRowKeys, selectedRows) {
window.console.log(selectedRowKeys) //选中行的key
window.console.log(selectedRows) //整行数据
this.selectedRowKeys = selectedRowKeys
},
statusFilter (status) {
window.console.log(status)
},
// 增加
add () {
this.data[3] = {
key: 3,
name: '小明4',
age: 32,
gender: 2,
tel: '0571-22098909',
address: 'New York No. 1 Lake Park'
}
this.bol = false
this.$nextTick(() => {
this.bol = true
})
window.console.log(this.data)
},
// 批量删除
del () {
},
//编辑
edit (record) {
window.console.log(record)
},
// 删除
sysAppDelete (text) {
window.console.log(text)
}
}
}
</script>
<style></style>
- columns数组中的每个对象的属性
dataIndex
对应:data-source数组中对象的属性名
就可以实现渲染 - 行选择
- :row-selection="{
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange
}" - selectedRowKeys :选中行的key放在这个数组中
- onChange:选中项发生变化时触发(通过this.selectedRowKeys = selectedRowKeys将key添加到selectedRowKeys)
- :row-selection="{
- 插槽
- customRender函数形式
- scopedSlots对象
- text:当前行的值,
- record:当前行数据
html结构-------------------------
<span slot="action" slot-scope="text, record">
<a @click="edit(record)">编辑</a>
<a-popconfirm title="确认删除?" @confirm="() => sysAppDelete(text)">
<a>删除</a>
</a-popconfirm>
</span>
js-------------------------------
scopedSlots: { customRender: 'action' }
modal
<template>
<div class="add">
<a-modal v-model="visible" :width="900">
<div slot="title" class="title">
增加
</div>
<div slot="footer" class="footer">
<a-button @click="cancel">取消</a-button>
<a-button @click="sumit">确定</a-button>
</div>
<p>Bla bla ...</p>
<p>Bla bla ...</p>
<p>Bla bla ...</p>
</a-modal>
</div>
</template>
<script>
export default {
data () {
return {
visible: true
}
},
methods: {
cancel () {
this.visible = false
window.console.log('点击了取消')
},
sumit () {
this.visible = false
window.console.log('点击了确定')
}
}
}
</script>
<style>
.title {
text-align: center;
}
.footer {
text-align: center;
}
</style>
- 通过
slot
可以重写title
和footer
- width控制对话框的宽度