0%

Vue入门实践学习总结

学习资料

官网
官方入门教程
VuePC端UI组件库:ElementiView、[vue-element-admin](https://panjiachen.github.io/vue-element
-admin-site/#/)、更多

列表增加筛选项

  1. 列表头增加筛选项『下拉选择、输入框』
    中增加如下代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    <el-form-item label="角色">
    <!--
    增加角色筛选
    筛选下拉项来源为:roleData,从接口获取赋值
    示例[{role_id: 1, role_name: "测试人员"}, {role_id: 2, role_name: "管理员"}]
    -->
    <el-select v-model="form.role_id"
    placeholder="请选择角色"
    clearable
    filterable
    @change="initUserChoice"
    value-key="role_id"
    style="padding-right:3px">
    <el-option
    v-for="(item) in roleData"
    :key="item.role_id"
    :label="item.role_name"
    :value="item.role_id">
    </el-option>
    </el-select>
    </el-form-item>
    <el-form-item label="状态">
    <!--
    增加状态筛选
    筛选下拉项来源为:userStatusList,筛选值为自己自定义的list
    示例:
    [
    {
    'id': '0',
    'name': '冻结'
    },
    {
    'id': '1',
    'name': '正常'
    }
    ]
    -->
    <el-select
    v-model="form.status"
    placeholder="请选择状态"
    clearable
    filterable
    @change="initUserChoice"
    value-key="status"
    style="padding-right: 3px"
    ><el-option
    v-for="item in userStatusList"
    :key="item.id"
    :label="item.name"
    :value="item.id">
    </el-option>
    </el-select>
    </el-form-item>
  2. 筛选字段定义
    ①定义筛选字段所需的自定义下来列表项
    ②增加两个筛选的值的字段定义

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <script>
    export default {
    data() {
    return {
    userStatusList: [
    {
    'id': '0',
    'name': '冻结'
    },
    {
    'id': '1',
    'name': '正常'
    }
    ],
    form: {
    role_id: '',
    status: ''
    }
    }
    }
    }
    </script>
  3. 筛选接口增加筛选字段的传参
    在请求接口中新增两个字段:role_id、status

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <script>
    export default {
    methods: {
    findUser() {
    var roleItem = '';
    this.$axios.post(this.$api.findUserApi, {
    'role_id': this.form.role_id,
    'status': this.form.status,
    }).then((response) => {
    }
    )
    }
    }
    }
    </script>

文本换行

  1. 通过 css属性实现

    示例1:

    1
    <p style="white-space: pre-wrap;" v-text='item.des'></p>

    示例2:

    1
    2
    3
    4
    <el-row>
    <el-col>职位描述:</el-col>
    <el-col style="white-space: pre-wrap;">{{resumeDetails.postDescribe}}</el-col>
    </el-row>

    white-space的各属性详情可以阅读这里

  2. 通过v-html实现

    需要先把字符串里的\n替换为<br>,然后用v-html指令渲染字符串为innerHTML

    1
    2
    3
    4
    5
    // JS部分
    this.text = res.data.replace(/\n/g, '<br>')

    // HTML部分
    <div v-html="text"></div>